Установить поле ввода в javascript не работает при назначении html для js переменной

Question

У меня есть следующее в cs html - который получает скрытый div и открывает диалоговое окно. но перед этим я хочу установить значение входных данных в jquery

<div id="js-exampleDiv" hidden>


     <form class="js-bootboxForm">
        <div class="form-group">
          @Html.LabelFor(x => x.Batch):
          <b><label class="ScannedBatch"></label></b>
        </div>
        <div class="form-group">
          @Html.LabelFor(x => x.Weight, new { @class = "mb-0" })
          <input type="text" id="ScannedWeightAdjust" class="ScannedWeightAdjust" />

        </div>
        <div class="form-group">
          @Html.LabelFor(x => x.Quantity, new { @class = "mb-0" })
          <input type="text" id="ScannedQuantityAdjust" class="ScannedQuantityAdjust" />
        </div>
        <div class="form-group">
          @Html.LabelFor(x => x.Packs, new { @class = "mb-0" })
          <input type="text" id="ScannedPacksAdjust" class="ScannedPacksAdjust" />
        </div>
      </form>
    </div>

Я использую диалог загрузочной коробки, чтобы получить html, и открываю диалог, но я пытаюсь установить поля ввода, но он не устанавливается, тогда как метки устанавливаются. Вот это javascript:

  $('.ScannedWeightAdjust').val('ss');
  var bootboxHtml = $('#js-exampleDiv').html();
`  bootbox.alert(bootboxHtml, function (result) {
    console.log($('#ScannedWeightAdjust', '.js-bootboxForm').val());
    console.log($('#ScannedPacksAdjust', '.js-bootboxForm').val());
    console.log($('#ScannedQuantityAdjust', '.js-bootboxForm').val());
  });`