JSFiddle - React, Tailwind, and code Playground

HTML

<body>
outside div
<br><br>

<a href="#" id="wrap_on">make inside appear</a>
<br><br>

<div id='wrap' style='background:red;display:none;padding:10px;width:300px'>
    <textarea id='inside'>inside div</textarea>
    <div id='inside2' style="background:#f0f" >also inside div -- click me</div>
</div>
</body>

JavaScript

$(document).ready(function() {
    $('#wrap_on').click(function() {
        $('#wrap').show();
        $('#inside').select().focus();    
    });
    
    $('#inside2').click(function() {
        alert('test');
    });

    // #inside2 does not work but #wrap does hide
    $(document).click(function(e) {
        var t = (e.target)
            if(t!= $("#inside").get(0) && t!=$("#inside2").get(0) && t!=$("#wrap_on").get(0) ) {
                $("#wrap").hide();
            }
    });
});