JSFiddle - React, Tailwind, and code Playground

by Simon Price

HTML

<textarea name="txtMessageBody" rows="15" cols="20" id="txtMessageBody" class="form-control margin30" style="height:250px;width:620px;">
</textarea>
                    <div class="btn-group sameRow" id="columns">

<ul class="dropdown-menu" style="padding-left: 10px; padding-right: ">
                            
                            <li style='padding-left: 10px'><label class='small' tabindex='-1'><input type='checkbox' class='resultsCB' name='resultsCB' value='Form Number: 0000000061'/>Form Number: 0000000061</label></li>
<li style='padding-left: 10px'><label class='small' tabindex='-1'><input type='checkbox' class='resultsCB' name='resultsCB' value='Submitted: 05/10/2015 09:28:25'/>Submitted: 05/10/2015 09:28:25</label></li>
<li style='padding-left: 10px'><label class='small' tabindex='-1'><input type='checkbox' class='resultsCB' name='resultsCB' value='Report Number: '/>Report Number: </label></li>
<li style='padding-left: 10px'><label class='small' tabindex='-1'><input type='checkbox' class='resultsCB' name='resultsCB' value='Report Date: '/>Report Date: </label></li>
<li style='padding-left: 10px'><label class='small' tabindex='-1'><input type='checkbox' class='resultsCB' name='resultsCB' value='Applicant: '/>Applicant: </label></li>
<li style='padding-left: 10px'><label class='small' tabindex='-1'><input type='checkbox' class='resultsCB' name='resultsCB' value='Agent: '/>Agent: </label></li>
<li style='padding-left: 10px'><label class='small' tabindex='-1'><input type='checkbox' class='resultsCB' name='resultsCB' value='Brand: '/>Brand: </label></li>
<li style='padding-left: 10px'><label class='small' tabindex='-1'><input type='checkbox' class='resultsCB' name='resultsCB' value='Department: '/>Department: </label></li>
<li style='padding-left: 10px'><label class='small' tabindex='-1'><input type='checkbox' class='resultsCB' name='resultsCB' value='Product Line: '/>Product Line: </label></li>
<li style='padding-left: 10px'><label class='small'...

JavaScript

$(function()
{
    CountSelectedCB = [];

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

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

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

    }

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