JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="menu-item">
        <label for="beans-palak">Beans Palak</label>
        <input id="beans-palak" type="checkbox" />
        <label for="bengal-lentils">Bengal Lentils</label>
        <input id="bengal-lentils" type="checkbox" />
        <label for="bombay-potatoes">Bombay-Potatoes</label>
        <input id="bombay-potatoes" type="checkbox" />
    </li>
</ul>

    <article class="post beans-palak">asd</article>
    <article class="post bombay-potatoes">asd</article>
    <article class="post bengal-lentils">asd</article>
    <article class="post bombay-potatoes bengal-lentils">asd</article>
    <article class="post bengal-lentils bombay-potatoes bengal-lentils">asd</article>

CSS

article {
    height: 100px;
    width: 100px;
    background: red;
    margin: 10px;
    display: inline-block;
}

JavaScript

$(document).ready(function () {
    $('.post').show();

    $('.menu-item').find('input:checkbox').on('click', function () {
        var post = $('.post').hide();
        
        var elements = $('.menu-item').find('input:checked');
        
        if(elements.length){
            elements.each(function () {
                post.filter('.' + this.id).show();
            });
        }
        else
            post.show();
    });
});