JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" value="Add Field Worker" id="btnFieldWorkers" onclick="ToggleDisplay();" class="btn btn-primary" />
<div id="div_fieldWorkers" style="display:none;" class="form_size">
    <input type='text' /> 
</div>

JavaScript

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

function ToggleDisplay(e) {
    e.stopPropagation();
    if ($("#div_fieldWorkers").data('shown')) {
        hide();
    } else display();
}

function display() {
    if ($("#div_fieldWorkers").children().length > 0) {
        $("#div_fieldWorkers").fadeIn(300, function () {
            $("#div_fieldWorkers").data('shown', true)
        });
    }
}

function hide() {
    $("#div_fieldWorkers").fadeOut(300, function () {
        $("#div_fieldWorkers").data('shown', false);
    });

}
$('body').on('click', function (e) {
    if ($(e.target).is(' :not(#div_fieldWorkers,#div_fieldWorkers *)')) {
        hide();
    }
});