JSFiddle - React, Tailwind, and code Playground

HTML

<button class="toggler" data-class="easy">Easy</button>,
<button class="toggler" data-class="fun">Fun</button>,
<button class="toggler" data-class="silly">Silly</button>,
<button class="toggler" data-class="all">Select All</button>


<ul id="list">
    <li class="easy">Bowling</li>
    <li class="fun">Balooning</li>
    <li class="fun easy">Boating</li>
    <li class="silly">Barfing</li>
    <li class="easy fun">Bafooning</li>
</ul>

CSS

#list li {
    display: none;
}
#list.easy li.easy {
    display: block;
}
#list.fun li.fun {
    display: block;
}
#list.silly li.silly {
    display: block;
}
#list.all li {
    display: block;
}

JavaScript

$('.toggler').click(function () {
    var category = $(this).data('class');
    $('#list').toggleClass(category);
});