JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mCSB_1_container" class="mCSB_container" dir="ltr" style="position:relative; top:0; left:0;">
    <label class="lab1">
        <input type="checkbox" value="blazers" />
<span>
Blazers & Waistcoats
<span class="prdctfltr_count">6/8</span>
</span>
    </label>
    <label class="lab2">
        <input type="checkbox" value="coatsjackets" />
<span>
Coats & Jackets
<span class="prdctfltr_count">1/3</span>
</span>
    </label>
</div>

CSS

.lab1{
    color: green;
}
.lab2{
    color: blue;
}

JavaScript

var $select = $('<select>').attr('name', "outfit");
$('#mCSB_1_container').append($select);
$('#mCSB_1_container label').each(function () {
    var $label = $(this);
    var $input = $label.find('input');
    var value = $input.val();
    var text = $label.text();
    $('<option>').val(value).attr("class", $label.attr('class')).text($.trim(text)).appendTo($select);
    //$label.hide();
});
// update the checkboxes to match the selection
$select.change(function(){
    var selection = $(this).val();
    // Now find the matching checkbox by value and change selection
    var $cb = $(':checkbox[value="'+selection+'"]').prop('checked', true);
    $(':checkbox').not($cb).prop('checked', false);
}).change();