JSFiddle - React, Tailwind, and code Playground

by Neal

HTML

<div id='side_categories'>
    <div class='testbox' data-category="A">A</div>
    <div class='testbox' data-category="b">B</div>
    <div class='testbox' data-category="c">C</div>
</div>


<div id='listings'>
    <div class='deals' data-category="A">1</div>
    <div class='deals' data-category="c">1</div>
    <div class='deals' data-category="A">1</div>
    <div class='deals' data-category="b">1</div>
    
    <div class='deals' data-category="b">1</div>
    <div class='deals' data-category="c">1</div>
    <div class='deals' data-category="b">1</div>
    <div class='deals' data-category="A">1</div>
    
    <div class='deals' data-category="b">1</div>
    <div class='deals' data-category="A">1</div>
    <div class='deals' data-category="b">1</div>
    <div class='deals' data-category="c">1</div>
</div>

CSS

.activated {
    font-weight: bold;
    background: red;
    color: black;
    background: red;
}

#side_categories { float: left; padding-right: 25px; }

#side_categories .testbox { cursor: pointer; padding: 8px; background: blue; margin: 2px; color: white;}

#listings { float: left; }

#listings .deals { padding: 10px; }

JavaScript

$("#side_categories .testbox").click(function() {
    var category = $(this).data('category'); //get the category from the clicked button
    var these_deals = $('#listings .deals').filter(function(index) {
        return $(this).data('category') == category;
    });
    $('#listings .deals').removeClass('activated');
    if (these_deals.hasClass('activated')) {
        //otherInput is the hidden text input
        these_deals.removeClass('activated');
    } else {
        these_deals.addClass('activated');
    }
});