How to duplicate elements ? cloneNode not workng as expected

Question

I want that whenever someone clicks on plus-icon a new form field should be created same as this one, new form field should be below to this one. all the buttons should be duplicated as well. Though I have achieved this by using cloneNode but it is not working as expected.1st form's value gets copied into new forms + new forms buttons do not work.

const container = document.querySelector(".container");

// Creating a SPAN element and appending it to div
container.addEventListener("click", (e) => {
  const tgt = e.target.closest(".icons");
  if (tgt) {
    if (tgt.classList.contains("swapped")) return; // stop
    if (tgt.classList.contains("check-icon")) {
      tgt.classList.add("swapped");
      let texts = document.querySelectorAll(".text");
      let items = document.querySelectorAll(".items");
      texts.forEach((text, i) => {
        let span = document.createElement("span");
        let val = document.createTextNode(text.value ? text.value : "");
        span.appendChild(val);
        span.classList.add("text2");
        items[i].appendChild(span);
        if (text.value) text.value = ""; // setting the input value to empty once clicked onto the check button
        text.parentNode.replaceChild(span, text);

        let btns = document.querySelectorAll(".mainicon"); // changing icon from check to edit
        if (tgt.classList.contains("check-icon")) {
          Array.from(btns).forEach((ele) => {
            ele.classList.toggle("hidden");
            if (ele.classList.contains("edit-icon")) {
              ele.classList.remove("swapped");
            }
          });
        }
      });
    }
    if (tgt.classList.contains("edit-icon")) {
      let texts = document.querySelectorAll(".text2");
      let items = document.querySelectorAll(".items");
      texts.forEach((text, i) => {
        let input = document.createElement("input");
        input.value = text.textContent;
        input.classList.add("text");
        items[i].appendChild(input);
        text.parentNode.replaceChild(input, text);

        let btns = document.querySelectorAll(".mainicon"); // changing icon from check to edit
        Array.from(btns).forEach((ele) => {
          ele.classList.toggle("hidden");
          if (ele.classList.contains("check-icon")) {
            ele.classList.remove("swapped");
          }
        });
      });
    }
    if (tgt.classList.contains("plus-icon")) {

      let maincont = document.querySelector('.mainContainer')
      let cont1 = document.querySelector('.container');
      let clonecont = cont1.cloneNode('false');

      maincont.appendChild(clonecont)
    }
  }
});

.mainContainer {
  height: 400px;
  width: 900px;
  background-color: white;
  margin: 200px auto;
  border: 5px solid black;
  border-radius: 8px;
}

.heading {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  text-align: center;
  position: relative;
  top: 15px;
}

.container {
  width: 800px;
  height: auto;
  border: 2px solid black;
  display: grid;
  grid-template-columns: 230px 230px 230px 50px 50px 50px;
  align-items: center;
  margin: auto;
  position: relative;
  top: 30px;
  padding: 10px;
  background-color: #007bff;
}

.items {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  color: #fff;
}

.text {
  width: 130px;
}

.icons {
  font-size: 18px;
  border: 2px solid #fff;
  margin-left: 12px;
  color: #007bff;
  cursor: pointer;
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icons:hover {
  color: #fff;
  background-color: #007bff;
}

.hidden {
  display: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Document</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
</head>

<body style="background-color: #007bff">
  <div class="mainContainer">
    <h1 class="heading">Details Collector</h1>
    <div class="container">
      <div class="items">
        <label class="label" for="Name">Name :</label> &nbsp;&nbsp;&nbsp;
        <input class="text" type="text" />
      </div>
      <div class="items">
        <label class="label" for="State">State :</label> &nbsp;&nbsp;&nbsp;
        <input class="text" type="text" />
      </div>
      <div class="items">
        <label class="label" for="Country">Country :</label> &nbsp;&nbsp;&nbsp;
        <input class="text" type="text" />
      </div>

      <div class="check-icon icons mainicon">
        <i class="fa fa-check " aria-hidden="true"></i>
      </div>

      <div class="edit-icon icons hidden mainicon">
        <i class="far fa-edit " aria-hidden="true"></i>
      </div>


      <div class="plus-icon icons ">
        <i class="fa fa-plus" aria-hidden="true"></i>
      </div> <br>
    </div>
  </div>
  </div>

  <script src="app.js"></script>
</body>

</html>

Your event listener is attached to the original container, not the added containers. When implementing event delegation, you should add the listener to a static container, not a dynamic one. — Barmar, Jan 17 '22 at 17:34
Also check out my minimal example with `cloneNode` here: https://stackoverflow.com/a/70742539/2472398 — gru, Jan 17 '22 at 17:36

How to duplicate elements ? cloneNode not workng as expected

0 Answers0