add table row

by ostapische

HTML

<table id="datble" class="form" border="1">
<tbody>
    <tr>
        <td><a href="#" onclick="addColumn(this);">Add 1</a></td>
        <td>
            <label>Name 1</label>
            <input type="text" required="required" name="BX1_NAME[]" />
        </td>
    </tr>
    <tr>
        <td><a href="#" onclick="addColumn(this);">Add 2</a></td>
        <td>
            <label>Name 1</label>
            <input type="text" required="required" name="BX1_NAME[]" />
        </td>
    </tr>
    <tr>
        <td><a href="#" onclick="addColumn(this);">Add 3</a></td>
        <td>
            <label>Name 1</label>
            <input type="text" required="required" name="BX1_NAME[]" />
        </td>
    </tr>
</tbody>
</table>

JavaScript

function addColumn(element) {
    var parentTd = element.parentNode;
    var parentTr = parentTd.parentNode;
    var parentTds = parentTr.querySelectorAll( "td" );
    // number of column with "Add" links
    var columnNumber = nInArray( parentTds, parentTd );
    
    var tr = element.parentElement.parentElement;
    var trs = tr.parentElement.querySelectorAll( "tr" );
    var trN = nInArray( trs, tr );
    var tds = trs[ trs.length - 1 ].querySelectorAll( "td" );
    var tdNextN = parseInt( tds[ tds.length - 1 ].querySelector( "input" ).name.match( /BX(\d+)_NAME\[\]/ )[ 1 ] );
    if ( trN == 0 ) {
        tdNextN++;
    }
    for ( var i = 0; i < trs.length; i++ ) {
        var tdWithLink = document.createElement( "td" );
        var a = document.createElement( "a" );
        a.href = "#";
        a.setAttribute( "onclick", "addColumn(this);" );
        a.innerHTML = "Add " + ( i + 1 );
        tdWithLink.appendChild( a );
        // trs[ i ].appendChild( tdWithLink );
        insertAfter( tdWithLink, trs[ i ].querySelectorAll( "td" )[ columnNumber + 1 ] );
        
        var td = document.createElement( "td" );
        if ( i >= trN ) {
            td.innerHTML = "<label>Name" + tdNextN + "</label>";
            td.innerHTML += "<input type=\"text\" required=\"required\" name=\"BX" + tdNextN + "_NAME[]\" />";
        }
        // trs[ i ].appendChild( td );
        insertAfter( td, tdWithLink );
    }
}
function nInArray( array, object ) {
    for ( var i = 0; i < array.length; i++ ) {
        if ( array[ i ] === object ) {
            return i;
        }
    }
    return -1;
}
function insertAfter( elem, refElem ) {
    return refElem.parentNode.insertBefore( elem, refElem.nextSibling );
}