JSFiddle - React, Tailwind, and code Playground

by ccarns

HTML

<select style="width: 220px;" id="ddClients" name="ctl00$ddClients">
		<option value="00000000-0000-0000-0000-000000000000"> </option>
        <option value="00000000-21bc-2222-8c39-000000000000">[Pro] Craig Karns</option>
		<option value="00000000-752b-2222-aa57-000000000000">[Pro] Ronald McDonald</option>
		<option value="00000000-ca82-2222-8864-000000000000">[Client] Barnes, Greg - 13697</option>
		<option value="00000000-3eac-2222-866f-000000000000">[Client] blow, joe - 13663</option>
		<option value="00000000-5b7c-2222-b9e3-000000000000">[Client] Schmoe, John - 13695</option>
		<option value="00000000-f35f-2222-b0d4-000000000000">[Client] Kitty, Meow - 13509</option>
		<option value="00000000-df7b-2222-b9e3-000000000000">[Client] test, template - 13694</option>
		<option value="00000000-327a-2222-89e9-000000000000">[Client] Three, Invite - 13692</option>
		<option value="00000000-327a-2222-89e9-000000000000">[Client] Two, Invite - 13691</option>
	</select>

JavaScript

$(document).ready(function () {
    AddOptionGroup('ddClients','[Pro]');
    AddOptionGroup('ddClients','[Client]');
});
    
function AddOptionGroup(nameOfDD,strGrouping){
    var select = $('#' + nameOfDD);
    var optgroup = $('<optgroup/>');
    optgroup.attr('label', strGrouping);
    
    $('option', select).filter(function() {
        var newVal = this.innerHTML.replace(strGrouping, "");
        if (newVal != this.innerHTML) {
            this.innerHTML = newVal;
            return true;
        }
        return false;
    }).wrapAll(optgroup);
};