JSFiddle - React, Tailwind, and code Playground

HTML

<select id="country">
    <option>Türkiye</option>
    <option>UK</option>
</select>

<select id="city">
    <option value="0">qwerty</option>
    <option value="1">ytrewq</option>
</select>

<select id="town">
    <option>aaaaaa</option>
    <option>bbbbbb</option>
</select>

JavaScript

$(document).ready(function(){
        var city = $('#city');
        var town = $('#town');

        $(document).on('change', '#country',function(){
            var country = $(this).val();
            if(country != 'Türkiye')
            {
                $('#city').replaceWith('<input class="form-control" type="text" name="city" id="city">');
                $('#town').replaceWith('<input class="form-control" type="text" name="town" id="town">');
            }
            else
            {
                $('#city').replaceWith(city);
                $('#town').replaceWith(town);
            }
        });
    
    	$(document).on('change', '#city', function(){
            
            var towns = [{ city: 0, town: [ "aaaaaa", "bbbbbb"]}, { city: 1, town: [ "cccccc", "dddddd"] }];
            var cityId = this.value;
            var cityTowns = $.grep(towns, function(e){ return e.city == cityId });
            $('#town').html('');
            $.each(cityTowns[0].town, function(key, value) {   
                 $('#town')
                     .append($("<option></option>")
                             .text(value)); 
            });
            
            // RE-SET CITY AND TOWN ON CITY CHANGE
            city = $('#city');
        	town = $('#town');
        });
    });