JSFiddle - React, Tailwind, and code Playground

HTML

<select id="source">
            <option selected="selected" value="BR">Select a state</option>
            <option value="FR">Andaman & Nicobar Islands</option>
            <option value="DE">Andhra Pradesh</option>            
        </select>
        <select id="source2a" class="cities">
            <option selected="selected" value="BR">Select a City in Andaman & Nicobar Islands</option>
            <option value="FR">City 1</option>
            <option value="DE">City 2</option>
            <option value="DE">Other</option>            
        </select>
         <select id="source2b" class="cities">
            <option selected="selected" value="BR">Select a City in Andhra Pradesh</option>
            <option value="FR">City 1</option>
            <option value="DE">City 2</option>
            <option value="IN">Other</option>            
        </select>

JavaScript

var i = 0;
$(document).ready(function(){
    var bindClickToToggle = function(element){
        element.click(function(){
            $(this).parents('.dropdown').find('dd ul').toggle();
        });
    };
    
    $('#source').change(function () {
        if ($('#source option:selected').text() == "Andaman & Nicobar Islands"){
            $('.cities').hide();
            $('#source2a').show();
        } else if ($('#source option:selected').text() == "Andhra Pradesh"){
            $('.cities').hide();
            $('#source2b').show();
        } else {
            $('.cities').hide();
        } });
        
    
    var bindClickToUpdateSelect = function(element){
        element.click(function(){
            var text = element.html();
            var value = element.find('span.value').html();
            var dropdown = element.parents('.dropdown');
            var select = $( dropdown.attr('target') );
            dropdown.children('dt').find('a').html(text);
            dropdown.find('dd ul').hide();
            select.attr('value', value);
        });
    };
    
    var getItemHtml = function(element){
        return '<dt><a href="#">'+element.text()+'<span class="value">'+element.attr('value')+'</span></a></dt>';
    };
    
    var getDropdownHtml = function(id, target){
        return '<dl id="target'+id+'" class="dropdown" target="#'+target.attr('id')+'"></dl>';
    };
    
    var getEnclosingHtml = function(){
        return '<dd><ul></ul></dd>';
    };
    
    var createDropDown = function(element, appendTo){
        var selected = element.find('option[selected]');
        var options = element.find('option');
        appendTo.append(getDropdownHtml(i, element));
        var target = appendTo.find('#target' + i);
        target.append(getItemHtml(selected));
        target.append(getEnclosingHtml());
        var appendOptionsTo = target.find('ul');
        options.each(function(){
            appendOptionsTo.append(getItemHtml($(this)));
        });
...