Изменить значение входного файла (не работает)

Question

У меня есть небольшой скрипт, который создает новый блок div, если пользователь нажимает кнопку. Чтобы посчитать, сколько их создано, у меня есть скрытый вход. Каждый раз, когда создается новый блок, значение этого скрытого ввода должно обновляться.

Вот мой скрипт:

$(function () {
    $("#addBtn3").on("click", function () {
        imageBlockCount++;
        document.getElementById("counter").value = imageBlockCount;

        $(
            $.parseHTML(
                `<div class="form-group" id="gallery-${imageBlockCount}" >
                <label for="new-content-${imageBlockCount}">New Content</label>
                    <input type="text" name="content-${imageBlockCount}" class="form-control" id="new-content-${imageBlockCount} test-${imageBlockCount}" placeholder="new content" required>
            </div>`
            )
        ).appendTo("#newElements");
    });
});

Это мой html код:

<div style="flex:auto;text-align:right;">
    <button id="addBtn3" type="button">Content +</button> 
</div>

<input name="counter" type="text" id="counter" value="0" hidden>

<div id="newElements">
</div>

Но в сценарии, где должно обновляться значение, не работает, но я не знаю почему, я не нахожу других методов, которые бы отличались.

Answer 1

Ваш код работает нормально. место console.log($("#counter").val()) после appendTo.

HTML веб-страницы не обновляется автоматически при изменении значения поля ввода.

Если вам нужна такая функциональность, вы можете разместить ее после обновления значения #counter:

$('#counter').attr('value', $('#counter').val());

$(function () {
  let imageBlockCount = 0
  $("#addBtn3").on("click", function () {
    imageBlockCount++;
    document.getElementById("counter").value = imageBlockCount;
    $('#counter').attr('value', $('#counter').val());
    $(
      $.parseHTML(
        `<div class="form-group" id="gallery-${imageBlockCount}"               <label for="new-content-${imageBlockCount}">New Content</label>
          <input type="text" name="content-${imageBlockCount}" class="form-control" id="new-content-${imageBlockCount} test-${imageBlockCount}" placeholder="new content" required>
        </div>`
      )
    ).appendTo("#newElements");
    console.log($('#counter').val())
  });
});

<div style="flex:auto;text-align:right;">
  <button id="addBtn3" type="button">Content +</button> 
</div>
  
<input name="counter" type="text" id="counter" value="0" hidden>
  
<div id="newElements">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>