JSFiddle - React, Tailwind, and code Playground

HTML

<p id="foo">foo</p>
<br/>
<br/>
<p id="bar">bar <span id="close">x</span></p>

CSS

#bar {
    display: none;
}

#close {
    color: red;
}

JavaScript

var bar = $('#bar');

$('#foo').click(function() {
    $(this).unbind('mouseout');  
}).mouseover(function() {
    bar.show();
}).mouseout(function() {
    bar.hide();
});

$('#close').click(function() {
    $('#foo').bind('mouseout', function() {
        bar.hide();
    });
    $(this).parent().hide();
});