JSFiddle - React, Tailwind, and code Playground

HTML

<label class="flabel" for="stext1">Example (Click Box to Show Options)</label><br/> 
<input class="strigger" name="ExampleText" id="stext1" type="text" readonly="readonly" /><br/>
<div id="s1" class="sdiv">
    <input type="checkbox" class="scheck" id="Option1" name="Options" value="Option1" /> <label for="Option1">Option1</label><br/>
    <input type="checkbox" class="scheck" id="Option2" name="Options" value="Option2" /> <label for="Option2">Option2</label><br/>
    <input type="checkbox" class="scheck" id="Option3" name="Options" value="Option3" /> <label for="Option3">Option3</label>
</div>

CSS

.sdiv { display: none; background-color: #EEEEEE; }

JavaScript

// close visible div if click occurs outside of div
$(document).bind("click focusin", function() {
    $(".sdiv").hide();
});

// prevent div close when click or mouseover occurs inside
$(".sdiv,.strigger").bind("click focusin", function(e) {
    e.stopPropagation();
});

$(".strigger").bind("click focusin", function() {
    $("#s1").show();
    return false;
});

// function to parse checked boxes and return results to text field


function parseChecked(chkContext, chkTrigger) {
    var selstring = '';
    var checkedList = $(".scheck:checked", '#' + chkContext).length;
    if (checkedList > 1) {
        selstring = checkedList + ' Selected';
    } else {
        selstring = $("input:checked", '#' + chkContext).attr('value');
    }
    $('#' + chkTrigger).val(selstring);
}

// re-parse checked boxes on checkbox click
$(".scheck").change(function() {
    var curSdiv = $(this).parent('.sdiv').attr('id');
    var curStrigger = $(this).parent('.sdiv').siblings('.strigger').attr('id');
    parseChecked(curSdiv, curStrigger);
});