JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <a id="link1" href="#">link1</a>
    <div class="drop" id="drop1">drop1</div>
</div> <br>

<div class="wrap">
    <a id="link2" href="#">link2</a>
    <div class="drop" id="drop2">drop2</div>
</div> <br><br>

jsOpenedWnd : [<div id="info"></div>]

CSS

.wrap { position: relative; }

.drop { 
    position: absolute;
    display : none; 
}

#info { display: inline; }

.wrap, .drop {
    border:1px solid black;
    max-width:70px;
}
html { border:1px solid black; }

JavaScript

jsOpenedWnd = "";

$(document).ready(function()  {
    $.fn.toggleWnd = function() {       
        //alert("Opened:["+jsOpenedWnd+"] this:["+this+"]");
        
        if ( jsOpenedWnd != this ) {
            $(this).toggle();
            $(jsOpenedWnd).toggle();
            jsOpenedWnd = this;
        }
        else {   
            $(this).toggle();
            jsOpenedWnd = "";
        }
        $("#nfo").text(jsOpenedWnd);
    }

    $("#link1").click(function(){
        $("#drop1").toggleWnd();
    });
    
    $("#link2").click(function(){
        $("#drop2").toggleWnd();
    });

    $("html").click(function(){
        $(jsOpenedWnd).toggleWnd(); 
    });
});