JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div_fieldWorkers" class="form_size" style='display:none;'><span>Hello How are you?</span></div>
<input
    type="button"
    value="Add Field Worker"
    id="btnFieldWorkers"
    class="btn btn-primary" />

JavaScript

$('#btnFieldWorkers').bind("click", ToggleDisplay);

function ToggleDisplay() {
    if ($("#div_fieldWorkers").data('shown'))
        hide();
    else 
        display();
}
    
function display() {    
    if ($("#div_fieldWorkers").children().length > 0) {
        $("#div_fieldWorkers").fadeIn(500, function() {
            $(document).bind("click", function() {hide(); });
            $("#div_fieldWorkers").data('shown', true)});         
    }  
}

function hide() {    
    $("#div_fieldWorkers").fadeOut(500, function() {
        $(document).unbind("click");
        $("#div_fieldWorkers").data('shown', false);                
    });
}