JSFiddle - React, Tailwind, and code Playground

by csdude55

HTML

<a href="#" class="cat-list_item active">One</a>

<a href="#" class="cat-list_item active">Two</a>

<a href="#" class="cat-list_item active">Three</a>

<a href="#" class="cat-list_item active">Four</a>

CSS

.inactive { background: #800; }
.active { background: blue; }

JavaScript

jQuery(document).ready(function($) {
            $('.cat-list_item').on('click', function() {
                $('.cat-list_item').removeClass('active');
                $(this).addClass('active');
                $.ajax({
                    type: 'POST',
                    url: '/wp-admin/admin-ajax.php',
                    dataType: 'html',
                    data: {
                        action: 'filter_projects',
                        category: $(this).data('id'),
                    },
                    success: function(res) {
                        $('.project-tiles').html(res);
                    }
                });
            });
        });