JSFiddle - React, Tailwind, and code Playground

HTML

<a id="link1" href="#"><div class="wrap">link1

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

    <div class="drop" id="drop2">drop2</div>
</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

$(document).ready(function () {
    jsOpenedWnd = "";
    
    $.fn.toggleWnd = function () {
        
        if (!this.is(jsOpenedWnd)) {
            $(this).toggle();
            $(jsOpenedWnd).toggle();
            jsOpenedWnd = this;
        } else {
            $(this).toggle();
            jsOpenedWnd = "";  
        }
        event.stopPropagation();
    };

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


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

});