JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input class="input" type="text">
        
    <div class="container">
        <button class="btn-inside">select</button>
        click somewhere here, then outside of this div
    </div>
        
</div>
    
<div>
    <input class="input" type="text">
        
    <div class="container">
        <button class="btn-inside">select</button>
        click somewhere here, then outside of this div
    </div>
        
</div>

CSS

body,html{
    height: 100%;
    width:100%;
}
body>div{
    padding-top: 20px;
}
.container{
    position: absolute;
    display: none;
    background-color: #ccc;
    width: 300px;
    height: 400px;
}
.submenu .container{
    display: block;
}

JavaScript

$(document).ready(function(){
var resultsSelected = false;
$(".container").hover(
    function () { resultsSelected = true; },
    function () { resultsSelected = false; }
);
    
$(".btn-inside").click(function() {
    alert('selected!');
    $(this).parent().parent().removeClass('submenu');
});

$( ".input" )
	.focus(function() {
        $(this).parent().addClass('submenu');
    })
    .focusout(function() {
    	if(!resultsSelected){
            $(this).parent().removeClass('submenu');
        }
    });

$(document).mouseup(function (e)
{
    var container = $(".container");

    if (!container.is(e.target)
        && container.has(e.target).length === 0
        && !$(".input").is(e.target))
    {
        $('.submenu').removeClass('submenu');
    }
});
});