<div id="container">
<div class="textBox">
  key: <input type="text" name="key"><br>
  x: <input type="number" name="x"><br>
  y: <input type="number" name="y"><br>
  size: <input type="number" name="size"><br>
  encoding:
  <select name="encoding">
    <option>text</option>
    <option>QR code</option>
    <option>Barcode</option>
  </select>
  <hr>
</div>
</div>
<button id="new">New</button>
<script>
let count = 1;

document.getElementById("new").onclick = function () {
  const container = document.getElementById("container");
  const first = container.querySelector(".textBox");
  const clone = first.cloneNode(true);

  // assign incrementing IDs based on count
  clone.querySelectorAll("input, select").forEach(el => {
    el.id = el.name + "-" + count;
  });

  count++;
  container.appendChild(clone);
};
</script>