JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btnDept">select Depts</button>
<div id="dialog" title="Select the Depts you want to include in the report" style="display:none;">
    <div>
        <section class="breakAfter">
            <label for="ckbxSelectAll">Select All</label>
            <input type="checkbox" id="ckbxSelectAll" />
            <label for="ckbxDeselectAll">Deselect All</label>
            <input type="checkbox" id="ckbxDeselectAll" />
        </section>
        <label for="ckbx2">2</label>
        <input type="checkbox" id="ckbx2" />
        <label for="ckbx3" id="lbl3">3</label>
        <input type="checkbox" id="ckbx3" />
    </div>
</div>

CSS

.breakAfter {
    display:block;
}

JavaScript

var deptsSelected = '';
$("#btnDept").click(function () {
    $("#dialog").dialog({
        modal: true
    });
    
    $("input:checkbox").click(function () {
        deptsSelected = '';     
        
        var checkedVal = $("label[for='" + this.id + "']").text();

        if (checkedVal == "Select All") {
            $(":checkbox").prop("checked", true);
            $("#ckbxDeselectAll").prop("checked", false);
           
            $('input[type=checkbox]').each(function () {
                if (this.checked && this.id != "ckbxSelectAll") {
                     deptsSelected +=   $("label[for='" + this.id + "']").text() + ','
                }
            });
            
        } else if (checkedVal == "Deselect All") {
            $(":checkbox").prop("checked", false);
            $("#ckbxDeselectAll").prop("checked", true);
            deptsSelected = '';
        } else {
            
            $("#ckbxSelectAll").prop('checked', false);
            $("#ckbxDeselectAll").prop('checked', false);
            
             $('input[type=checkbox]').each(function () {
                if (this.checked && this.id != "ckbxSelectAll") {
                     deptsSelected +=   $("label[for='" + this.id + "']").text() + ','
                }
            });
        }
        alert(deptsSelected);
    });
});