Как загрузить значения из Localstorage в несколько динамически загружаемых зависимых выпадающих списков?

Question

Я знаю, что это может быть простой проблемой для многих, но я стою на месте и не обладаю навыками для выполнения этой задачи. Я нигде не смог найти работающего ответа в Интернете ни в одном из моих исследований. У меня есть несколько групп зависимых выпадающих списков / опций (по три на группу), которые загружаются через сервер ajax. Первый выпадающий в каждой группе функций. Однако второй и третий нет. У меня есть две (2) проблемы. Первая проблема заключается в том, что я не могу получить значения в localstorage для повторной загрузки в раскрывающийся список перспективы после страницы refre sh. Вторая проблема заключается в том, что значение, хранящееся в localstorage, не является правильным значением, которое было фактически выбрано в раскрывающемся списке. Похоже, что localalstorage хранит либо последнее значение в раскрывающемся списке, либо первое значение в раскрывающемся списке. Локальное хранилище во втором раскрывающемся меню всегда хранит последнее значение, а в третьем раскрывающемся всегда хранится первое значение. Пожалуйста, извините мой код. Это не очень эффективно. Я все еще учусь писать лучший код. Я постараюсь сжать мой код как можно лучше, чтобы вы могли видеть, что происходит. Я был бы признателен за каждый совет, который вы, хорошие программисты, можете дать мне по этой проблеме и по написанию кода в целом. Вызов jquery и ajax выглядит следующим образом:

enter code here
  $(document).ready(function () {
    $('.country').on('change', function () {
        var countryId = $(this).val();            
        var state_select = $(this).closest('form').find('.state');
        var city_select = $(this).closest('form').find('.city');            

        if (countryId) {
            $.ajax({
                type: 'POST',
                dataType: 'json', 
                url: 'ajaxData.php',
                data: {
                    country_id: countryId
                },
                success: function (r) {
                    console.log('States', r);                        

                    if (r.status) {
                        r.data.forEach(function (state) {
                            $(state_select).append(`<option value="${state.id}">${state.name}</option>`);                  

                            $('.state').each(function(r) {
                                var stateList = $(state);
                                var thisSelection = $(this);
                                var thisId = thisSelection.attr('id');
                                var storageId = 'state-' + thisId;
                                var storedInfo = localStorage.getItem(storageId);

                                thisSelection.on('change', function(e) {                                    
                                    var selectedOptions = [];
                                    thisSelection.find(':selected').each(function(i) {
                                        var thisOption = $(this);
                                        selectedOptions.push(thisOption.val());
                                    });
                                    localStorage.setItem(storageId, (state.name));

                                });
                            });                                
                        });

                    } else {                            
                        $(state_select).html('<option value="" selected="selected">Unavailable</option>');
                        $(city_select).html('<option value="" selected="selected">Unavailable</option>');
                    }

                }
            })
        };
    }); 

    $('.state').on('change', function () {
        var stateId = $(this).val();            
        var city_select = $(this).closest('form').find('.city');

        if (stateId) {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'ajaxData.php',
                data: {
                    state_id: stateId
                },
                success: function (r) {
                    console.log('Cities', r);

                    if (r.status) {
                        r.data.forEach(function (city) {
                            $(city_select).append(`<option value="${city.id}">${city.name}</option>`);                    

                            $('.city').each(function(i) {
                                var stateList = $(city);
                                var thisSelection = $(this);
                                var thisId = thisSelection.attr('id');
                                var storageId = 'city-' + thisId;
                                var storedInfo = localStorage.getItem(storageId);

                                thisSelection.on('change', function(e) {                                    
                                    var selectedOptions = [];
                                    thisSelection.find(':selected').each(function(i) {
                                        var thisOption = $(this);
                                        selectedOptions.push(thisOption.val());
                                    });
                                    localStorage.setItem(storageId, (city.name));
                                });
                            });                                
                        });
                    } else {                            
                        $(city_select).html('<option value="" selected="selected">Unavailable</option>');
                    }
                }
            })
        };                       
    });   
    });           

Разметка HTML выглядит следующим образом:

<form id="form1" autocomplete="off">
    <select id="country1" class="country" name="country">
        <?php include("countryAjaxData.php"); ?> 
    </select> 
    <select id="state1" class="state" name="state">
        <option value="" selected="selected">Select state</option>
    </select> 
    <select id="city1" class="city" name="city">
        <option value="" selected="selected">Select city</option> 
    </select>
</form>
<form id="form2" autocomplete="off">
    <select id="country2" class="country" name="country">
        <?php include("countryAjaxData.php"); ?> 
    </select> 
    <select id="state2" class="state" name="state">
        <option value="" selected="selected">Select state</option>
    </select> 
    <select id="city2" class="city" name="city">
        <option value="" selected="selected">Select city</option> 
    </select>
</form>
<form id="form3" autocomplete="off">
    <select id="country3" class="country" name="country">
        <?php include("countryAjaxData.php"); ?> 
    </select> 
    <select id="state3" class="state" name="state">
        <option value="" selected="selected">Select state</option>
    </select> 
    <select id="city3" class="city" name="city">
        <option value="" selected="selected">Select city</option> 
    </select>
</form>

Я пытался зафиксируйте «setItem» и проанализируйте «getItem», например;

  localStorage.setItem(storageId, JSON.stringify(state.name));
  var item = JSON.parse(localStorage.getItem("storageId"));
  var item = JSON.parse(localStorage.getItem("xyz")); //keys of items in localstorage

Если кто-нибудь знает, что, черт возьми, я делаю неправильно, я был бы очень признателен за правильное руководство. Спасибо