Повторяющиеся поля формы, сохраняя работу JavaScript-действий

Question

Я построил форму, состоящую из полей «ввод текста», «опция выбора» и «флажки».
Внизу моей формы есть кнопка «Добавить книгу».Если пользователь нажимает на эту кнопку, все поля дублируются под формой.Затем пользователь может нажать на другую кнопку «Добавить книгу», чтобы в другой раз дублировать все поля ниже.И так далее ..
Я должен сказать, что поля флажков оригинальной формы действуют с действиями Javascript.Например, если щелкнуть флажок A, появится флажок B.
Проблема заключается в том, что после нажатия кнопки «Добавить книгу» серия дублированных полей не взаимодействует с элементами управления Javascript.

Я использовал этот фрагмент кода:

    <script>
    $("#Button").click(function() {
    $("#add").clone().appendTo("#wrapper");
    });
    </script>

    <div class="form-group col-md-3">
    <a class="btn btn-success" onclick="add()" href="#">
    <i class="fas fa-plus"></i></i> Add a book
    </a>
    </div>

   <div id="wrapper">
   <!-- champs du formulaire -->
   <div class="form-group col-md-12" id="add" style="display:none;">

   <!-- Cote -->    
   <div class="form-row">               
   <div class="form-group col-md-3">
   <label for="exampleInputPassword1">Côte</label>
   <input type="text" class="form-control" id="cote-man" name="cote-man[]">
   </div>
   </div>
   ... And so on

Знаете ли вы, как я могу сделать, чтобы дублировать мои поля и заставить мои действия JavaScript также работать?

Любая помощь будет принята с благодарностью!

ОБНОВЛЕНИЕ -
Вы можете увидеть проблему в этой скрипке: https://jsfiddle.net/dw25o4uq/1/
Если вы нажмете нафлажок «Текстовая агиография», появляется другой флажок.
Если добавить другую книгу и нажать на второй флажок «Текстовая агиография», ничего не появляется ..

Answer 1

Пожалуйста, не могли бы вы предоставить полный пример своего кода, включая HTML и JS

, но в любом случае, пока вы не предоставите пример полного кода с флажком

относительно действия флажка, который не был запущенновые внедренные элементы в DOM это означает, что вы добавляете свой обработчик событий checkbox непосредственно в флажок, но в случае, если вы хотите, чтобы прослушиватель событий для элемента будет вставлен программно в дерево DOM, так что вам просто нужно сделать что-то похожее напосле чего вызвал делегирование события

$(document).ready(function() {
  //instead of add event directly to your checkbox
  $(CHECKBOX_SELECTOR).on(EVENT_NAME, function() {
    // code will be apply on this event...
  })

  // you just need to do event delegation on the checkbox event instead of the above code you need to do it
  $(document).on(EVENT_NAME, CHECKBOX_SELECTOR, function() {
    // code will be apply on this event...
  })

})