JSFiddle - React, Tailwind, and code Playground

HTML

<span id=button-reset class="button">Reset</span>
<span id=button-1 class="button">Toggle 1</span>
<span id=button-2 class="button">Toggle 2</span>
<span id=button-12 class="button">Toggle both</span>
<div class=main-container>
    <div id="toggle-1" class="container">Div 1
        <div class="hide-show">works!</div>
    </div>
    <div id="toggle-2" class="container">Div 2
        <div class="hide-show">works!</div>
    </div>
</div>

CSS

.button {
    border: 1px solid blue;
    margin: 3px;
    cursor: pointer;
}
.main-container {
    border: 1px solid black;
    width: 400px;
    height: 400px;
}
.container {
    border: 1px solid red;
    display: none;
}
.hide-show {
    border: 1px solid green;
    visibility: hidden;
    display: block;
    pointer-events: all;
}
.make-displayed {
    display: block;
}
.make-visible {
    visibility: visible;
}

JavaScript

$("span#button-reset")
    .on("click", function () {
           $("div#toggle-1").removeClass("make-displayed");
           $("div#toggle-2").removeClass("make-displayed");
         });
$("span#button-1")
    .on("click", function () {
           $("div#toggle-1").addClass("make-displayed");
           $("div#toggle-2").removeClass("make-displayed");
         });
$("span#button-2")
    .on("click", function () {
           $("div#toggle-1").removeClass("make-displayed");
           $("div#toggle-2").addClass("make-displayed");
         });
$("span#button-12")
    .on("click", function () {
           $("div#toggle-1").addClass("make-displayed");
           $("div#toggle-2").addClass("make-displayed");
         });
$("div.hide-show")
    .on("mouseover", function() {
           alert("Mouseover");
           $(this).addClass("make-visible");
         });