JSFiddle - React, Tailwind, and code Playground

HTML

<p id = "title">Click anywhere to turn the outer circles on or off.</p>
<div class = "container" onclick = "onOff()">
    <div class = "outerCircle" id = "outerLeftCircle">
        <div class = "innerCircle" id = "innerLeftCircle">
        </div>
    </div>

    <div class = "outerCircle" id = "outerRightCircle">
        <div class = "innerCircle" id = "innerRightCircle">
        </div>
    </div>  
</div><!-- Closes the container div -->

CSS

.outerCircle {
    width:100px;
    height:100px;
    background:red;
    margin:10px;
    visibility:visible;
}

JavaScript

// declares the function
window.onOff = function () {
    alert("Entering function now");
    if ($("#outerLeftCircle").css("visibility") === "visible") {
        $(".outerCircle").css("visibility","hidden");
    } else {
        $(".outerCircle").css("visibility","visible");
    }
}

// attach the function to body click event
$(window).click(onOff);