JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<input id="wait_dev" type="checkbox" autocomplete="off">Wait dev
<input id="wait_support" type="checkbox" autocomplete="off">Wait support
<input id="wait_branch" type="checkbox" autocomplete="off">Wait branch
<table>
    <tr class="bugrow wait_dev">
        <td>Dev item</td>
    </tr>
    <tr class="bugrow wait_support">
        <td>Support item</td>
    </tr>
    <tr class="bugrow wait_branch">
        <td>Branch item</td>
    </tr>
    <tr class="bugrow wait_dev">
        <td>Dev item</td>
    </tr>
    <tr class="bugrow wait_support">
        <td>Support item</td>
    </tr>
    <tr class="bugrow wait_branch">
        <td>Branch item</td>
    </tr>
    <tr class="bugrow wait_dev">
        <td>Dev item</td>
    </tr>
    <tr class="bugrow wait_support">
        <td>Support item</td>
    </tr>
    <tr class="bugrow wait_branch">
        <td>Branch item</td>
    </tr>
</table>

JavaScript

$(':checkbox').change(function(){
    // Build a list of comma-separated classes
    var classes = ""
    $(':checkbox:checked').each(function(){
        if (classes) classes += ",";
        classes+= "." + $(this).attr('id');
    });
    // hide all, then show matching only
    $('.bugrow').hide().filter(classes).show();
});