JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="blabla" data-kleur="all">Any Color</a>
<a href="#" class="blabla" data-kleur="red">Red</a>
<a href="#" class="blabla" data-kleur="blue">Blue</a>
<a href="#" class="blabla" data-kleur="yellow">Yellow</a>

<ul>
    <li class="item red">Apple</li>
    <li class="item blue">Grape</li>
    <li class="item yellow">Lemon</li>
    <li class="item red">Cherry</li>
    <li class="item yellow">Banana</li>
    <li class="item red">Strawberry</li>
    <li class="item blue">Blueberry</li>
    <li class="item red">Raspberry</li>
    <li class="item yellow">Pineapple</li>
    <li class="item yellow">Yellowberry</li>
</ul>

JavaScript

$(document).ready(function(){    
    $("a.blabla").click(function () {
            var fruitColor = $(this).data('kleur');
            var fruitColorSelector = '';
            var fruitTypeSelector = '';
    
            if (fruitColor == "all") {
                $(".item").show();
            } 
            else {
                if (fruitColor != "all") {
                    fruitColorSelector = '.' + fruitColor;
                }
    
                $(".item").hide();
                $(fruitColorSelector).show();
            }
        });
});