Копирование формы с функционалом одним нажатием кнопки

Question

У меня есть форма, и когда я нажимаю на кнопку, мне нужно скопировать, но она не работает. Даже если это работает, я не могу скопировать функциональность формы. Я пытался скопировать в общую форму c, но она не работает

JQ:

$(document).ready(function() {

var addToWishList = document.querySelector('#add-to-wishlist');
var wishlistItem = document.querySelector('#wishlist-item');
var wishlist = document.querySelector('#wishlist');
var clearlist = document.querySelector('#clearlist');
var saved = localStorage.getItem('wishlistItems');
var add = document.querySelector('#eventBtn');

addToWishList.addEventListener('submit', function (event) {
    event.preventDefault();
    if (wishlistItem.value.length < 1) return;
    wishlist.innerHTML += '<li>' + wishlistItem.value + '</li>';
    localStorage.setItem('wishlistItems', wishlist.innerHTML);
}, false);

if (saved) {
    wishlist.innerHTML = saved;
}

$(document).ready(function(){
  $("#clearlist").click(function() {
    localStorage.clear();
    $("#list li").empty();
    });

});

add.click(function(){
    addToWishList.clone(true).appendTo("body");
  });
});

И моя форма:

      <form id="add-to-wishlist">
      <button type="button" id="eventBtn">Add new list</button>
      <label><h1>To do list</h1></label>
      <input type="text" name="wishlist-item" id="wishlist-item">
      <button type="submit">Add to Wishlist</button>
      <button type="reset" id="clearlist">Delete records</button>
      <ul id="list">
        <li id="wishlist"></li>
      </ul>
     </form>
``

Answer 1

Есть 2 проблемы с вашим подходом:

1) идентификаторы должны быть уникальными, иначе ваш HTML недействителен и не будет работать должным образом. Лучше вместо этого перейти на классы. В противном случае необходимо, например, увеличивать значение каждый раз, когда вы клонируете форму, и соответственно изменять все идентификаторы клонированных элементов.

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

Я соответствующим образом скорректировал ваш код и настроил события для работы с указанной формой c. Код здесь не работает в фрагменте стека из-за локального хранилища, но вот рабочий Fiddle .

$(document).ready(function() {

  var saved = localStorage.getItem('wishlistItems');

  $(document).on("click", ".add", function(event) {
    event.preventDefault();
    let wishlistItem = $(this).closest("form").find(".wishlist-item");
    let wishlist = $(this).closest("form").find(".wishlist");
    if (wishlistItem.val().length < 1) return;
    wishlist.append('<li>' + wishlistItem.val() + '</li>');
    localStorage.setItem('wishlistItems', wishlist.html());
  });

  if (saved) {
    $(".wishlist:eq(0)").html(saved);
  }

  $(document).on("click", ".clearlist", function() {
    localStorage.clear();
    $(this).closest("form").find(".list li").remove();
  });

  $(document).on("click", ".eventBtn", function() {
    let newList = $(this).closest("form").clone();
    newList.find(".list li").empty();
    newList.find(".wishlist-item").empty();
    newList.appendTo("body")
  });
});

 <form class="add-to-wishlist">
   <button type="button" class="eventBtn">Add new list</button>
   <label>
     <h1>To do list</h1>
   </label>
   <input type="text" name="wishlist-item" class="wishlist-item">
   <button class="add">Add to Wishlist</button>
   <button type="reset" class="clearlist">Delete records</button>
   <ul class="list">
     <li class="wishlist"></li>
   </ul>
 </form>