این کد html من


                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="row g-3 position-relative">
                                            <div class="col-12 col-sm-6 col-lg-4">
                                                <input class="form-control dt-input dt-full-name" id="provinceInput"
                                                       placeholder="استان" type="search">
                                                <div id="provinceSuggestions" class="suggestion-box"></div>
                                            </div>
                                            <div class="col-12 col-sm-6 col-lg-4">
                                                <input class="form-control dt-input" id="cityInput" placeholder="شهر" type="search" disabled>
                                                <div id="citySuggestions" class="suggestion-box"></div>
                                            </div>
                                            <div class="col-12 col-sm-6 col-lg-4 d-flex align-items-end">
                                                <button id="filterDoctors" class="btn btn-primary me-2">جستجوی دکترها</button>
                                                <button id="filterAdvanced" class="btn btn-primary">جستجوی پیشرفته</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

این کد جاوا اسکریپت من

document.addEventListener("DOMContentLoaded", async function () {
    data_city = await get_data("city_TakingTurns_data");
});

async function addRow_Table(data) {
    const Body_Table = document.getElementById("data_table");

    data.forEach(async (item, index) => {
        Body_Table.insertAdjacentHTML('beforeend', `
            <tr>
                <td class="control" tabindex="0" style="display: none;"></td>
                <td class="sorting_1">
                    <div class="d-flex justify-content-start align-items-center user-name">
                        <!-- <div class="avatar-wrapper">
                            <div class="avatar me-3">
                                <img src="../../assets/img/avatars/2.png" alt="Avatar" class="rounded-circle">
                            </div>
                        </div> -->
                        <div class="d-flex flex-column">
                            <span class="fw-medium">${item.fullName}</span> <!-- نام بیمار -->
                            <small class="text-muted">${item.nationalCode}</small> <!-- کد ملی -->
                        </div>
                    </div>
                </td>
                <td>
                    <span class="text-truncate d-flex align-items-center">
                        ${item.appointmentTime}
                    </span>
                </td>
                <td>
                    <span class="fw-medium">${await processText(item.symptoms)}</span>
                </td>
                <td>${item.patientStatus}</td>
                <td>
                    <span class="badge${await checkColorStatus(item.appointmentStatus)}">${item.appointmentStatus}</span>
                </td>
                <td>
                    <button class="btn btn-primary waves-effect waves-light" data-bs-target="#takingTurnsDetail" data-bs-toggle="modal" type="button" id="data-${index}">نمایش</button>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <a href="javascript:;" class="text-body delete-record">
                            <i class="ti ti-trash ti-sm mx-2"></i>
                        </a>
                    </div>
                </td>
            </tr>
            `);
        });

}

async function get_data(file_name) {
    const url = './json-custome/'+file_name+'.json';
    const response = await json_file_load(url);
    return response;
}

const provinceInput = document.getElementById("provinceInput");
const provinceSuggestions = document.getElementById("provinceSuggestions");
const cityInput = document.getElementById("cityInput");
const citySuggestions = document.getElementById("citySuggestions");

provinceInput.addEventListener("input", function () {
    const query = this.value.toLowerCase();
    provinceSuggestions.innerHTML = "";

    for (const province in data_city) {
        if (province.toLowerCase().includes(query)) {
            const suggestionItem = document.createElement("div");
            suggestionItem.classList.add("suggestion-item");
            suggestionItem.textContent = province;
            suggestionItem.onclick = () => {
                provinceInput.value = province;
                cityInput.disabled = false; // فعال کردن فیلد شهر
                showCitySuggestions(province); // بارگذاری شهرها
                provinceSuggestions.innerHTML = ""; // پاک کردن پیشنهادات
                cityInput.value = ''; // پاک کردن فیلد شهر
                citySuggestions.innerHTML = ''; // پاک کردن پیشنهادات شهر
            };
            provinceSuggestions.appendChild(suggestionItem);
        }
    }
});

function showCitySuggestions(selectedProvince) {
    const cities = data_city[selectedProvince];
    citySuggestions.innerHTML = ""; // پاک کردن قبلی

    // فقط یک بار بارگذاری
    cityInput.removeEventListener("input", handleCityInput); // حذف رویداد قبلی
    cityInput.addEventListener("input", handleCityInput); // تنظیم رویداد جدید

    function handleCityInput() {
        const query = this.value.toLowerCase();
        citySuggestions.innerHTML = "";

        for (const city of cities) {
            if (city.toLowerCase().includes(query)) {
                const suggestionItem = document.createElement("div");
                suggestionItem.classList.add("suggestion-item");
                suggestionItem.textContent = city;
                suggestionItem.onclick = () => {
                    cityInput.value = city;
                    citySuggestions.innerHTML = ""; // پاک کردن پیشنهادات
                };
                citySuggestions.appendChild(suggestionItem);
            }
        }
    }
}


اینم داده های شهر من

{
    "آذربایجان شرقی": [
        "تبریز",
        "مراغه",
        "میاندوآب",
        "اهر",
        "کلیبر",
        "آذرشهر",
        "بستان آباد",
        "اسکو"
    ],
    "آذربایجان غربی": [
        "ارومیه",
        "خوی",
        "سلماس",
        "پلدشت",
        "ماکو",
        "نقده",
        "شهرچایی"
    ],
    "اصفهان": [
        "اصفهان",
        "نجف‌آباد",
        "فلاورجان",
        "کاشان",
        "مبارکه",
        "خور و بیابانک"
    ],
    "البرز": [
        "کرج",
        "نظرآباد",
        "ساوجبلاغ",
        "هشتگرد"
    ],
    "ایلام": [
        "ایلام",
        "شیروان و چرداول",
        "مهران",
        "دهلران"
    ],
    "بوشهر": [
        "بوشهر",
        "دیر",
        "گناوه",
        "دیلم"
    ],
    "تهران": [
        "تهران",
        "کرج",
        "شهر ری",
        "اسلامشهر",
        "پیشوا",
        "نسیم‌شهر"
    ],
    "چهارمحال و بختیاری": [
        "شهرکرد",
        "فارسان",
        "بن",
        "کوهرنگ"
    ],
    "خراسان رضوی": [
        "مشهد",
        "نیشابور",
        "سبزوار",
        "تایباد"
    ],
    "خراسان شمالی": [
        "بجنورد",
        "شیروان",
        "درگز",
        "اسفراین"
    ],
    "خوزستان": [
        "اهواز",
        "دزفول",
        "خرمشهر",
        "آبادان"
    ],
    "زنجان": [
        "زنجان",
        "خدابنده",
        "ایجرود",
        "طارم"
    ],
    "سمنان": [
        "سمنان",
        "شاهرود",
        "دامغان",
        "سرخه"
    ],
    "سیستان و بلوچستان": [
        "زاهدان",
        "زابل",
        "خاش",
        "چابهار"
    ],
    "فارس": [
        "شیراز",
        "مرودشت",
        "فسا",
        "سپیدان"
    ],
    "قزوین": [
        "قزوین",
        "البرز",
        "بیدستان",
        "محمودآباد"
    ],
    "قم": [
        "قم",
        "کهک",
        "سلفچگان",
        "جعفریه"
    ],
    "کردستان": [
        "سنندج",
        "بیجار",
        "قمچف"
    ],
    "کرمان": [
        "کرمان",
        "رفسنجان",
        "بم",
        "زرند"
    ],
    "کرمانشاه": [
        "کرمانشاه",
        "پاوه",
        "سنقر",
        "سرپل ذهاب"
    ],
    "کهگیلویه و بویراحمد": [
        "یاسوج",
        "گچساران",
        "بویراحمد",
        "بندارک"
    ],
    "گلستان": [
        "گرگان",
        "انزلی",
        "علی‌آباد",
        "آزادشهر"
    ],
    "گیلان": [
        "رشت",
        "لنگرود",
        "لاهیجان",
        "تالش"
    ],
    "هرمزگان": [
        "بندرعباس",
        "میناب",
        "قشم",
        "پارسیان"
    ],
    "همدان": [
        "همدان",
        "ملایر",
        "نهاوند",
        "اسدآباد"
    ]
}

اینم نمونه داده دکتر من

{
        "doctor": "دکتر محمدی",
        "specialty": "عمومی",
        "medicalCenter": "مرکز پزشکی سلامت",
        "appointmentDate": "۱۴۰۲/۱۰/۱۰",
        "appointmentTime": "۱۰:۰۰",
        "details": "مشاوره عمومی و بررسی وضعیت سلامت.",
        "province": "تهران",
        "city": "تهران"
    },

میخوام وقتی استان و شهر انتخاب شد و روی جستجوی دکتر ها کلیک شد دکتر های مربوط به اون استان و شهر رو بیاره