JSFiddle - React, Tailwind, and code Playground

HTML

<button class="toggler" data-switch="0">Easy</button>,
<button class="toggler" data-switch="1">Fun</button>,
<button class="toggler" data-switch="2">Silly</button>
<br/>
<button class="select_all">Select All</button>
<ul>
    <li class="easy hidden">Bowling</li>
    <li class="fun hidden">Balooning</li>
    <li class="fun easy hidden">Boating</li>
    <li class="silly hidden">Barfing</li>
    <li class="easy fun hidden">Bafooning</li>
</ul>

CSS

.checked {
    opacity: .3;
}
/* li {
    display: none;
} */
 .hidden {
    display: none
}

JavaScript

var switcher = [false, false, false];
var classes = ['easy', 'fun', 'silly'];

$('.select_all').click(function () {
    $('.select_all').toggleClass("checked");
    var allChecked = $('.select_all').hasClass("checked");
    switcher = [allChecked, allChecked, allChecked];
    $(".toggler").toggleClass("checked", allChecked);
    $('li').toggleClass("hidden", !allChecked);
});

$('.toggler').click(function () {
    var x = $(this).hasClass('checked');

    switcher[$(this).data('switch')] = !x;
    $(this).toggleClass("checked");
    $('li').each(function () {
        var cur = $(this);
        cur.addClass('hidden');
        $.each(switcher, function (index, data) {
            if (data && cur.hasClass(classes[index])) {
                cur.removeClass('hidden');
            }
        });
    });

    var allChecked = switcher.indexOf(false) < 0;
    $('.select_all').toggleClass("checked", allChecked);
});