JSFiddle - React, Tailwind, and code Playground

by orionrush

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...

CSS

ul#venue-regionchecklist {
    /* visibility: hidden; */
    /* display: none; */
}

JavaScript

$(function() {
    $('ul#venue-regionchecklist').each(function() {
        $(this).find('label').each(function() {
                var cnt = $(this).contents();
                $(this).replaceWith(cnt);
            });
        var $select = $('<select />');
        $(this).find('li').each(function() {
            var $option = $('<option />');
             $(this).html($(this).html());
            $option.attr('id', $(this).attr('id')).html($(this).html());
            $select.append($option);
        });
        $(this).replaceWith($select);
    });
});