JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <label for="cdg">
            <input type="radio" id="cdg" name="type" value="brand1"/>brand1</label>
    </li>
    <li>
        <label for="cdh">
            <input type="radio" id="cdh" name="type" value="brand2"/>brand2</label>
    </li>
    <li>
        <label for="cdi">
            <input type="radio" id="cdi" name="type" value="brand3"/>brand3</label>
    </li>
</ul>
<ul>
    <li>
        <label for="cdj">
            <input type="radio" id="cdj" name="quantity" value="10"/>10</label>
    </li>
    <li>
        <label for="cdk">
            <input type="radio" id="cdk" name="quantity" value="20"/>20</label>
    </li>
    <li>
        <label for="cdl">
            <input type="radio" id="cdl" name="quantity" value="30"/>30</label>
    </li>
</ul>

<div id="mainhide">
    <div>brand1 in stock - 10</div>
    <div>brand2 in stock - 20</div>
    <div>brand3 in stock - 30</div>
</div>

JavaScript

$(function () {
    var $filters = $("input:radio");
    var $categoryContent = $('#mainhide div');

    $filters.click(function (){
        $categoryContent.hide();
        var $selectedFilters = $(this).closest('ul').find(':radio').filter(':checked');
            $categoryContent.filter(':contains(' + $selectedFilters.val() + ')').show();
    });

});