JSFiddle - React, Tailwind, and code Playground

by Sunny SM

HTML

<div id="add_ac">
  <div id="duplicater">
    <input type="text" name="c[]" placeholder="Add comment..."/>
  </div>
</div>
<button id="add_ac_btn">+</button>

<div id="add_ai">
  <div id="duplicetorSec">
    <input type="text" name="tai[]" placeholder="Add triggers, separated by commas"/> 
    <input type="text" name="cai[]" placeholder="Add comment..."/>
  </div>
</div>  
<button id="add_ai_btn">+</button>

JavaScript

var i = 0;
var k = 0;
var original = document.getElementById('duplicater');
var originalSec = document.getElementById('duplicetorSec');

function duplicate(){
  var clone = original.cloneNode(true); // "deep" clone
  i = ++i;
  clone.id = "duplicetor"+ i; // there can only be one element with  an ID
  original.parentNode.appendChild(clone);
  clearCloneElement(clone.id);
}
function duplicateSec(){
  var clone = originalSec.cloneNode(true); // "deep" clone
  console.log(clone);
  k = ++k;
  clone.id = "duplicetorSec"+ k; // there can only be one element with  an ID
  originalSec.parentNode.appendChild(clone);
  clearCloneElement(clone.id);
}
function clearCloneElement(id){ 
  var divId = '#'+id;
  $(divId).find("input[type^='text']").each(function() {
    $(this).val('');
  });
}
document.getElementById('add_ac_btn').onclick = function add_new_ac(){
  duplicate();
}
document.getElementById('add_ai_btn').onclick = function add_new_ac(){
	duplicateSec();
}