Clone and modify HTML elements on click

HTML

<div id="template" style="display:none;">
    <div> 
      <label for="checkbox"><input id="checkbox" type="checkbox"> Checkbox <span class="pos">?</span></label>
    </div>
</div>
<button id="add">Add</button>
<div id="container" data-pos="0"></div>

JavaScript

document.getElementById("add").addEventListener("click", function() {
  let clone=document.getElementById("template").firstElementChild.cloneNode(true);
  let pos = parseInt(document.getElementById("container").dataset.pos);
  pos++;
  document.getElementById("container").dataset.pos = pos;
  let elements=clone.querySelectorAll("*");
  for (let e of elements) {
    if (e.nodeName==="LABEL") {
      e.innerHTML+=" LABEL "+pos;
    }
    else if (e.nodeName==="INPUT") {
      console.log("Modifying input");
      e.id+="_"+pos;
    }
    else if (e.nodeName==="SPAN") {
      console.log("Modifying span");
      e.innerHTML="SPAN "+pos;
      console.log("Span content is now",e.innerHTML);
    }
  }
  clone.querySelector("span").innerHTML += " This works!";
  console.log("Check id of checkbox (should be checkbox_"+pos+"): ", clone.querySelector("input").id);
  document.getElementById("container").appendChild(clone);
});