JSFiddle - React, Tailwind, and code Playground

by Simon Price

HTML

</div>
        <div>


            <div id="emailForm"float: left; display: inline-block">
                <span id="lblReportDetail" class="h4">Report Detail</span>
                <br />

                <br />
                <div class="sameRow">
                    <span id="lblTo" class="sameRow">To:</span>
                    <input name="txtEmailTo" type="text" id="txtEmailTo" class="form-control sameRow padleft10 margin10" style="width:620px;" />
                    
                    <a href="#emailAddresses" class="fancybox"><span style='font-size: 20px; color: darkgreen'><i id="toEmail" class="fa fa-users sameRow margin10"></i></span></a>
                </div>
                <br />

                
                <br />
                <br />
                 <div class="sameRow">
                    <span id="lblSubject" class="sameRow">Subject:</span></br>
                    <input name="txtSubject" type="text" id="txtSubject" class="form-control sameRow padleft10 margin30" style="width:620px;" />
                    
                </div>
                <br />
                <div class="btn-group" style="float: right" id="columns">
                    <a class="btn btn-primary dropdown-toggle" style="width: 250px; margin-right: 75px;" data-toggle="dropdown" href="#">Select Report Fields to send<span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" style="padding-left: 10px; padding-right: ">
                        
                        <li style='padding-left: 10px; padding-right: 10px'><label class='small' tabindex='-1'><input type='checkbox' class='resultsCB' name='resultsCB' value='Form Number: 0000000069'/>Form Number: 0000000069</label></li>
<li style='padding-left: 10px; padding-right: 10px'><label class='small' tabindex='-1'><input type='checkbox' class='resultsCB' name='resultsCB' value='Submitted: '/>Submitted: </label></li>
<li style='padding-left: 10px; padding-right: 10px'><label...

JavaScript

$(function () {
    CountSelectedCB = [];

    function displayCheckbox() {
        $("input[checkbox]").change(function () {
            selectedCB = [];
            notSelectedCB = [];

            CountSelectedCB.length = 0; // clear selected cb count
            $("input.[checkbox]:checked").each(function () {
                if ($(this).is(":checked")) {
                    CountSelectedCB.push($(this).val());
                }
            });

            $("#txtMessageBody").val(CountSelectedCB.join("\n"));
        }).trigger("change");

    }

    
    $(document).ready(displayCheckbox);
});