Загрузить обратно отправленное состояние формы HTML при загрузке страницы

Question

У меня есть форма, в которой есть checkbox, и когда я нажимаю на нее, появляются textbox и combobox

Перед нажатием

After Click

$(document).ready(function() {
  $("#pairingDiv").hide(); //This is hiding pairing item type div on page load   
  $("#currentItemDiv").hide(); // This is hiding the current item div on page load
});


$("#pairOrNotCheckBox").click(function() {
  if ($('#pairOrNotCheckBox:checkbox:checked').length > 0) { //This means user checked the 'Need to pair?' checkbox
    $("#pairingItem").val("");
    $("#pairingDiv").show();
    $("#currentItemDiv").show();
  } else { //User unchecked the 'Need to pair?' checkbox
    $("#pairingItem").val(""); //Clearing the pairing item drop down box
    $("#pairingDiv").hide(); //Hiding pairingDiv
    $("#currentItemDiv").hide(); //Hiding the currentitemDiv
  }
});

<div class="col-sm-2">
  <label for="pairOrNotCheckBox" style="display: block; text-align:center;">Need to Pair?</label>
  <input type="checkbox" class="form-control" id="pairOrNotCheckBox" name="pairOrNotCheckBox">
</div>

<div class="col-sm-2" id="currentItemDiv">
  <label for="currentItem">This Tag</label>
  <input type="textbox" class="form-control" id="currentItem" name="currentItem" readonly value="sample">
</div>

<div class="col-sm-2" id="pairingDiv">
  <label for="pairingItem">Pairing Item</label>
  <select class="form-control" id="pairingItem" name="pairingItem">
    <option></option>
    <option>LO</option>
    <option>T</option>
  </select>
</div>

Допустим, я поставил галочку и нажал кнопку «Сохранить», эти данные будут сохранены в базе данных.

What I нужно

Когда кто-то загружает страницу с этими конкретными данными, я хочу, чтобы флажок был установлен, и все выбранные элементы должны быть извлечены из базы данных. Существует переменная $paired для отслеживания статуса checkbox из базы данных. Используя это, я изменил код следующим образом:

<div class="col-sm-2">
                <label for="pairOrNotCheckBox" style="display: block; text-align:center;">Need to Pair?</label>
                  <?php
                    if($paired == 0){
                        echo '<input type="checkbox" class="form-control" id="pairOrNotCheckBox" name="pairOrNotCheckBox">';
                    }else{
                        echo '<input type="checkbox" class="form-control" id="pairOrNotCheckBox" name="pairOrNotCheckBox" checked=checked>';
                    }
                  ?>
                
              </div>

Я вижу, что checkbox проверено. Но два других div и соответствующие значения не отображаются. Кто-нибудь знает, как это решить?

На самом деле коды посложнее с какой-то функцией Ajax и все. Но в демонстрационных целях я сделал это просто

Edit 1

Чтобы получить лучший обзор, я опубликую несколько снимков экрана

При нажатии на checkbox, отобразится следующее

Then when choose the Pairing Item option, jQuery will show hidden field and with Ajax call, it will populate next drop down menu

Choose next and jQuery show next drop down and another Ajax call populate items

введите описание изображения здесь

Затем, когда пользователь нажимает кнопку save, все эти значения будут сохранены. Я пытаюсь восстановить все это, обратившись к переменной $paired.