JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="$('#item_1').show();">Open 1</button>
<label id="item_1" class="item_1">Text 1</label>
<button onclick="$('#item_2').show();">Open 2</button>
<label id="item_2" class="item_2">Text 2</label>

CSS

.item_1 {
    width: 50px;
    height: 50px;
    background: blue;
}

.item_2 {
    width: 50px;
    height: 50px;
    background: red;
}

JavaScript

$(document).mouseup(function (e)
{
    var container = new Array();
    container.push($('#item_1'));
    container.push($('#item_2'));
    
    $.each(container, function(key, value) {
        if (!$(value).is(e.target) // if the target of the click isn't the container...
            && $(value).has(e.target).length === 0) // ... nor a descendant of the container
        {
            $(value).hide();
        }
    });
});