JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper" class="showcat1">
    <div class="item cat1">Category 1 A</div>
    <div class="item cat2">Category 2 A</div>
    <div class="item cat3">Category 3 A</div>
    <div class="item cat1">Category 1 B</div>
    <div class="item cat2">Category 2 B</div>
    <div class="item cat3">Category 3 B</div>
    <div class="item cat1">Category 1 C</div>
    <div class="item cat2">Category 2 C</div>
    <div class="item cat3">Category 3 C</div>
</div>
<input id="input" type="number" min="1" max="3" value="1"/>

CSS

.showcat1 > .item:not(.cat1) {
    display: none;
}
.showcat2 > .item:not(.cat2) {
    display: none;
}
.showcat3 > .item:not(.cat3) {
    display: none;
}

JavaScript

$('#input').change(function () {
    var wrapper = $('#wrapper');
    wrapper.removeClass('showcat1');
    wrapper.removeClass('showcat2');
    wrapper.removeClass('showcat3');
    wrapper.addClass('showcat' + this.value);
});