JSFiddle - React, Tailwind, and code Playground

HTML

<div class="reltitles" id="Batteries" style="display:block;">
      <font class="resultHeader">(2) Batteries </font> 
        </div>
    <div class="clearfix" value="Batteries" name="Batteries" id="Batteries">
    <ul class="box-content" id="Batteries">
                    <li id="50-80" class="item first" style="display: none;"></li>
                    <li id="50-80" class="item first" style="display: none;"></li>
                    <li id="20-50" class="item">
                     something here 
                   </li></ul>
    </div>

<ol id="myAnchor">                        
                        <li><a id="0-20" href="#">0.00 - 20.00</a></li>
                        <li><a id="20-50" href="#">20.00 - 50.00</a></li>
                        <li><a id="50-80" href="#">50.00 - 80.00</a></li>
                        <li><a id="80-100" href="#">80.00 - 100.00</a></li>
                        <li><a id="All" href="#">All</a></li>
                    </ol>

JavaScript

$("#myAnchor li a").click(function(){

        var tt=document.getElementsByClassName("reltitles");
        var j = 0;
            for(k=0;k<tt.length;k++)
            {
                var clear=tt[k].nextElementSibling;
                var list=clear.childNodes[1].children;
                for(i=0;i<list.length;i++)
                    {
                    if(list[i].style.display=="none")
                    {
                        j++;
                    }
                    if(j==list.length)
                        {
                        tt[k].style.display="none";
                        }
                    }
            }
});