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:155px'>
<textarea id='inside'>inside div</textarea>
<div id='inside2'>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
$('#wrap').focusout(function() {
$('#wrap').hide();
});
});