JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<button id="add-forms">Add</button>
<div id="forms">
  <form action="" name="form1">
    <input type="text" placeholder="form1">
  </form>
  <form action="" name="title1">
    <input type="text" placeholder="title1">
  </form>
</div>

CSS

form{
  margin-bottom:10px;
}
form[name^="title"]{
  border-bottom:3px solid #333;
}

JavaScript

function addForms(i, container){
	var form1 = document.createElement("form");
  form1.name = "form" + i;
	var form2 = document.createElement("form");
  form2.name = "title" + i;
  createForm1(i, form1); 
  createForm2(i, form2);
  container.appendChild(form1);
  container.appendChild(form2);
}
function createForm1(i, form){
	//тут добавлять содержимое формы 
  var input = document.createElement("input");
  input.type = "text";
  input.placeholder = "form" + i;
  form.appendChild(input);
}
function createForm2(i, form){
	//тут добавлять содержимое формы 
  var input = document.createElement("input");
  input.type = "text";
  input.placeholder = "title" + i;
  form.appendChild(input);
}
var i = 1; // счетчик форм
var container = document.getElementById("forms")
document.getElementById("add-forms").onclick = function(){
	++i;
  addForms(i, container);
}