JSFiddle - React, Tailwind, and code Playground

by Peter Nosko

HTML

<form>
    <dl>
        <dd><label><input type="checkbox" id="S1" name="item1" checked disabled>item1</label></dd>
        <dd><input type="checkbox" class="OrderBy" id="S2" name="item2">item2</input></dd>
        <dd><input type="checkbox" class="OrderBy" id="S3" name="item3"><label for="cb3">item3</label></dd>
        <dd><label><input type="checkbox" class="OrderBy" id="S4" name="item4">item4</label></dd>
        <dd><label><input type="checkbox" class="OrderBy" id="S5" name="item5">item5</label></dd>
        <dd><label><input type="checkbox" class="OrderBy" id="S6" name="item6">item6</label></dd>
        <dd><label><input type="checkbox" class="OrderBy" id="S7" name="item7">item7</label></dd>
        <dd><label><input type="checkbox" class="OrderBy" id="S8" name="item8">item8</label></dd>
        <dd><label><input type="checkbox" class="OrderBy" id="S9" name="item9">item9</label></dd>
        <dd><label><input type="checkbox" class="OrderBy" id="S10" name="item10">item1</label></dd>
        <dd><label><input type="checkbox" class="OrderBy" id="S11" name="item11">item11</label></dd>
        <hr>
        <dd>
            <select id="OrderBy" name="OrderBy" size="12">
                <option value="0">Choose Order By item</option>
                <option value="1">item1</option>
            </select>
        </dd>
     </dl>
</form>

JavaScript

// Add or remove checkbox item from select options 
$(".OrderBy").click(function() {
    $ckbox = $(this);
    $label = $(this).parent();
    $id    = $ckbox.attr('id').substring(1); // Strip character prefix
   // alert( $ckbox.attr('id') + ':' + $label.text() + ' = ' + $ckbox.attr('checked') + ' | ' + $ckbox[0].checked );

    if ($ckbox[0].checked) {
        selectOrderBy = document.getElementById("OrderBy");
        newOption = document.createElement("option");
        newOption.value = $id;
        newOption.text  = $label.text();
        // Add to end
        selectOrderBy.add(newOption);
        // Now sort the options by value
        $("#OrderBy").append($("#OrderBy option").remove().sort(function(a, b) {
            //var at = $(a).val(), bt = $(b).val();
            //return (at > bt)?1:((at < bt)?-1:0);
            a = a.value;
            b = b.value;
            return a-b;
        }));
    } else {
        // Remove unchecked item
        $("#OrderBy").find('option[value="' + $id + '"]').remove();
    }
});