JSFiddle - React, Tailwind, and code Playground

HTML

<button id="reset">Reset</button>

<table>
    <tr data-cat="red">
        <td>red car</td>
    </tr>
    <tr data-cat="blue">
        <td>blue jacket</td>
    </tr>
    <tr data-cat="red">
        <td>red bull</td>
    </tr>
    <tr data-cat="red">
        <td>red pen</td>
    </tr>
    <tr data-cat="blue">
        <td>blue pen</td>
    </tr>
    <tr data-cat="green">
        <td>green pen</td>
    </tr>
    <tr data-cat="red">
        <td>red pen</td>
    </tr>
    <tr data-cat="purple">
        <td>purple pen</td>
    </tr>
</table>

CSS

td {
    border:1px solid #555;width:200px;
}

tr:nth-child(odd) {
    background-color:#aaa;
}

.displaynone {
    display: none;
}

tr.displaynone ~ tr {
    background-color: transparent;
}

tr.displaynone ~ tr:nth-child(even) {
    background-color:#aaa;
}

tr {
    cursor: pointer;
}

JavaScript

$("table").on("click", "tr", function() {
    //Comment out the next line to see how this breaks.
    $("table tr").removeClass("displaynone")
    $(this).addClass("displaynone")
});

$("#reset").on("click", function () {
     $("table tr").removeClass("displaynone")
});