JSFiddle - React, Tailwind, and code Playground

by Amir Sharifian

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body dir="rtl">
        <div>
            <label>استان سری اول</label>
            <select class="province">
            </select>
            <label>شهر سری اول</label>
            <select class="city">
            </select>
        </div>
        
        <div>
            <label>استان سری دوم</label>
            <select class="province">
            </select>
            <label>شهر سری دوم</label>
            <select class="city">
            </select>
        </div>
</body>

JavaScript

$(document).ready(function(){
    loadprovince();
    $(".province").change(function(){
        $(this).closest('div').find('.city').addClass( "temp09120217432class" );
        loadCity($(this).val());
    });
});

function loadprovince() {
    selectValues = {"":"","آذربایجان‌شرقی":"آذربایجان شرقی","آذربایجان‌غربی":"آذربایجان غربی","اردبیل":"اردبیل","اصفهان":"اصفهان","البرز":"البرز","ایلام":"ایلام",
        "بوشهر":"بوشهر","تهران":"تهران","چهارمحال‌و‌بختیاری":"چهارمحال و بختیاری","خراسان‌جنوبی":"خراسان جنوبی","خراسان‌رضوی":"خراسان رضوی","خراسان‌شمالی":"خراسان شمالی","خوزستان":"خوزستان",
        "زنجان":"زنجان","سمنان":"سمنان","سیستان‌و‌بلوچستان":"سیستان و بلوچستان","فارس":"فارس","قزوین":"قزوین","قم":"قم","کردستان":"کردستان",
        "کرمان":"کرمان","کرمانشاه":"کرمانشاه","کهکیلویه‌و‌بویراحمد":"کهگیلویه و بویراحمد","گلستان":"گلستان","گیلان":"گیلان","لرستان":"لرستان","مازندران":"مازندران",
        "مرکزی":"مرکزی","هرمزگان":"هرمزگان","همدان":"همدان","یزد":"یزد"};

    $.each(selectValues, function (key, value) {
        $('.province')
            .append($("<option></option>")
                .attr("value", key)
                .text(value));
    });
}

//Load city for selete
function loadCity(province){
    $(".temp09120217432class").find('option').remove();

    switch (province) {
        case "آذربایجان‌شرقی":
            var selectValues = {"آذرشهر":"آذرشهر","اسکو":"اسکو","اهر":"اهر","بستان‌آباد":"بستان‌آباد","بناب":"بناب","تبریز":"تبریز","جلفا":"جلفا","چاراویماق":"چاراویماق","سراب":"سراب","شبستر":"شبستر","عجب‌شیر":"عجب‌شیر","کلیبر":"کلیبر","مراغه":"مراغه","مرند":"مرند","ملکان":"ملکان","میانه":"میانه","ورزقان":"ورزقان","هریس":"هریس","هشترود":"هشترود"};
            break;
        case "آذربایجان‌غربی":
            var selectValues =...