Onclick the + button, add fields [closed]

when you click on the “+” button, regenerate all fields below the existing ones, with TypeScript. I tried to rely on pure javascript, with appendChild, but I didn’t have much success.

<div id="duplicate">
    <hr>
    <div class="row">
      <div class="col-md-6">
        CONTENT
      </div>
      <div class="col-md-6">
        CONTENT
      </div>
    </div>
  </div>

Answer

You can use cloneNode to clone the existing div then insert it after the current div before the next sibling. The issue might be the fact that your element id’s will be duplicated so you’ll have to be careful if you’re using the id’s for something.

var currentDiv = document.getElementById('duplicate');
var clonedDiv = currentDiv.cloneNode(true);
currentDiv.parentNode.insertBefore(clonedDiv, currentDiv.nextSibling);

<div id="duplicate">
  <hr>
  <div class="row">
    <div class="col-md-6">
      CONTENT
    </div>
    <div class="col-md-6">
      CONTENT
    </div>
  </div>
</div>