JSFiddle - React, Tailwind, and code Playground

HTML

<div id="welcome"></div>

<button id="addNewRow"> Add New Row</button>

JavaScript

function CreateInterface() {

    document.getElementById("welcome").innerHTML = '<form action="?" method="get" onsubmit=" return validate(this)">' + '<table id="hierarchyCriteria" summary="" cellspacing="3" cellpadding="0" border="0">' + '<tbody><tr id="test">' + '<td><INPUT type="checkbox" name="chk"/></td> ' + '<th>Userid   : </th>' + '<td ><input name="userid" type="text" class="text" value="" maxlength="10" /></td>' + '</tr>' +

    '<tr id="lastrow"><td colspan="2" align="center">' + '<INPUT type="button" value="Add" onclick="addRow()" />' + '<INPUT type="button" value="Delete" onclick="delRow()" />' + '<input type="submit" value="submit" />' + '</td></tr></tbody>' + '</table>' +

    '</form>';
}


function addRow() {
    var referenceNodes = document.getElementById("hierarchyCriteria").getElementsByTagName("tr");
    //-2 because last row is button row
    var referenceNode = referenceNodes[referenceNodes.length - 2];
    var newNode = referenceNode.cloneNode(true);
  
    	newNode.getElementsByTagName("input")[1].value = "";
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

}
document.getElementById("addNewRow").onclick = addRow;
CreateInterface();