JSFiddle - React, Tailwind, and code Playground

HTML

The toggling divs are not siblings:<br/>
Click a button to make it visible:<br /><br />
<input type="button" value="One" class="one" />
<input type="button" value="Two" class="two" />
<input type="button" value="Three" class="three" />
<input type="button" value="Four" class="four" /><br /><br />

<ul>
<li>
    <div id="one">One</div>
</li>
<li><ul><li>
        <div id="two">Two</div>
</li></ul></li>
<li>
    <div id="three">Three</div>
    <div id="four">Four</div><br/><br/>
</li>
</ul>

JavaScript

// Optional code to hide all divs
            $("div").hide();
              // Selector
            var divs = $("#one, #two, #three, #four");
              // Show chosen div, and hide all others
            $("input").click(function () 
            {
                $("#" + $(this).attr("class")).show();
                divs.not(("#" + $(this).attr("class"))).hide();
            });