JSFiddle - React, Tailwind, and code Playground
HTML
<div id="usersForm">
<div class="divtr" id="presUser_1">
<div class="divtd">Age
<input type="text">
</div>
<div class="divtd"> <a href="javascript:void(0);" title="Add" onClick="userController.addUsersForm();">Add</a>
<a href="javascript:void(0);" title="Delete this" onClick="userController.removeUsersForm('presUser_1');">Delete</a>
</div>
</div>
</div>
CSS
#usersform {
display: table;
}
.divtr {
}
.divtd {
display: table-cell;
padding-top: 10px;
}
#presUser_1 {
display: table-row!important;
}
JavaScript
var userController = {
id: 2,
addUsersForm: function () {
var newdiv = document.createElement('div');
var divIdName = 'presUser_' + this.id;
newdiv.setAttribute('id', divIdName);
newdiv.className = "divtr";
newdiv.innerHTML = '<div class="divtd">Age ' +
'<input type="text">' +
'</div>' +
'<div class="divtd"> <a href="javascript:void(0);" title="Add" onClick="userController.addUsersForm();">Add</a> ' +
'<a href="javascript:void(0);" title="Delete this" onClick="userController.removeUsersForm(' + "'" + divIdName + "'" + ');">Delete</a>' +
'</div>';
document.getElementById("usersForm").appendChild(newdiv);
this.id = this.id + 1;
console.log(this.id)
},
removeUsersForm: function (id) {
document.getElementById(id).remove();
}
}