JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="venue-regionchecklist" data-wp-lists="list:venue-region" class="categorychecklist form-no-clear">
    <li id="venue-region-9">
        <label class="selectit">
            <input id="in-venue-region-9" type="radio" name="radio_tax_input[venue-region][]" value="9">International</label>
        <ul class="children">
            <li id="venue-region-10">
                <label class="selectit">
                    <input id="in-venue-region-10" type="radio" name="radio_tax_input[venue-region][]" value="10">Canada</label>
            </li>
            <li id="venue-region-11">
                <label class="selectit">
                    <input id="in-venue-region-11" type="radio" name="radio_tax_input[venue-region][]" value="11">Europe</label>
            </li>
            <li id="venue-region-14">
                <label class="selectit">
                    <input id="in-venue-region-14" type="radio" name="radio_tax_input[venue-region][]" value="14">Latin America</label>
            </li>
            <li id="venue-region-13">
                <label class="selectit">
                    <input id="in-venue-region-13" type="radio" name="radio_tax_input[venue-region][]" value="13">Mexico</label>
            </li>
        </ul>
    </li>
    <li id="venue-region-3">
        <label class="selectit">
            <input id="in-venue-region-3" type="radio" name="radio_tax_input[venue-region][]" value="3">USA</label>
        <ul class="children">
            <li id="venue-region-4">
                <label class="selectit">
                    <input id="in-venue-region-4" type="radio" name="radio_tax_input[venue-region][]" value="4">Northeast</label>
                <ul class="children">
                    <li id="venue-region-5">
                        <label class="selectit">
                            <input id="in-venue-region-5" type="radio" name="radio_tax_input[venue-region][]" value="5">Mid-Atlantic</label>
                    </li>
                    <li...

JavaScript

function NBSPs(level) {
	var localNBSPs=""
	for(var j=0;j<level*3;j++) {
	   localNBSPs = localNBSPs + "&nbsp;";
	}
	return localNBSPs;
}

function buildDropDownFromUL(CurrentUL, level) {
   var dropDownHTML = "";
   CurrentUL.children("li").each(function () { // Cycle through all LI elements
      if ($(this).children("ul").length == 0) {
         // There is no UL element in this LI so it means LI is a selectable option
         dropDownHTML = dropDownHTML + "<option value='" + $(this).children("label").children("input").attr("value") + "'>" + NBSPs(level) + $(this).children("label").text() + "</option>";
      } else {
         // There is a UL in the LI so it means the LABEL in the current LI is a OPTGROUP 
         // and the UL should be again processed
         dropDownHTML = dropDownHTML + "<optgroup label='" + NBSPs(level) + $(this).children("label").text() + "'>" + "</optgroup>" + buildDropDownFromUL($(this).children("ul"), level + 1);
      }
   });
   return dropDownHTML + "<optgroup label='&nbsp;'></optgroup>";
}

$("#venue-regionchecklist").replaceWith(function(){
	   var result = "<select>" + "<option>Please select a region</option>" + "<optgroup label='&nbsp;'></optgroup>" + buildDropDownFromUL($(this), 0) + "</select>";
	   // alert(result);
	   return result;
});