JSFiddle - React, Tailwind, and code Playground

HTML

<form action="Untitled-2.php" name="dataTable" method="post">
    <table width="760" id="dataTable" border="1">
        <tr>
            <td width="20">
                <input type="checkbox" name="chk1" />
            </td>
            <td width="12">1</td>
            <td width="200">
            <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
              
            </td>
            <td width="146">
                <input type="text" name="txtbox2[]" />
            </td>
            <td width="188">
                <input type="text" name="txtbox3[]" />
            </td>
        </tr>
        
        <tr class="row-parent">
            <td width="22" rowspan="2">
                <input type="checkbox" name="chk" />
            </td>
            <td width="12" rowspan="2">1</td>
            <td width="149" rowspan="2">
                <input type="text" name="txtbox[]" />
            </td>
            <td width="20">
                <input type="checkbox" name="chk1" />
            </td>
            <td width="12">1</td>
            <td width="200">
                <input type="text" name="txtbox1[]" />
            </td>
            <td width="146">
                <input type="text" name="txtbox2[]" />
            </td>
            <td width="188">
                <input type="text" name="txtbox3[]" />
            </td>
        </tr>
        <tr>
            <td width="20">&nbsp;</td>
            <td width="12">&nbsp;</td>
            <td>
                <input type="button" value="+ Child Row" onClick="addChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
                <input type="button" value="- Child Row" onClick="deleteChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
            </td>
            <td width="146">&nbsp;</td>
            <td width="188">&nbsp;</td>
        </tr>
    </table>
    <input...

CSS

table tr:first-child {
    display: none;
}

JavaScript

function hasClass(el, cssClass) {
    return el.className && new RegExp("(^|\\s)" + cssClass + "(\\s|$)").test(el.className);
}

var rowNumber = 1;

function addRow(tableID) {
    var counter = document.getElementById(tableID).rows.length-1;
    var row = document.getElementById(tableID);
    var newRow0 = row.rows[1].cloneNode(true);
    var newRow1 = row.rows[counter].cloneNode(true);
    
    // Increment
    rowNumber ++;
    newRow0.getElementsByTagName('td')[1].innerHTML = rowNumber;
    
    // Update the child Names
    var items = newRow0.getElementsByTagName("input");
    for (var i = 0; i < items.length; i++) {
        items[i].value = null;
        items[i].name = counter + '_' + items[i].name;
    }
    
    var refRow = row.getElementsByTagName('tbody')[0];
    refRow.insertBefore(newRow0, refRow.nextSibling);
    refRow.insertBefore(newRow1, refRow.nextSibling);
}

function deleteRow(tableID) {
    var table =  document.getElementById(tableID);
    var i = table.rows.length - 1;
    
    while (2 < i && !hasClass(table.rows[i], 'row-parent')) {
        table.deleteRow(i)
        i--;
    }
    if (2 < i) {
        table.deleteRow(i)
        rowNumber --;
    }
}

function addChildRow(e, tableID) {
    var table = document.getElementById(tableID);
    var newRow = table.rows[0].cloneNode(true);
    
    // Increment
    if (e > 0)
        
    if (!isNaN(table.rows[e-1].getElementsByTagName('td')[4].innerHTML)) 
        var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[4].innerHTML)
    else
        var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[1].innerHTML)
        
    newRow.getElementsByTagName('td')[1].innerHTML = counter + 1;
    
    // Update the child Names
    var items = newRow.getElementsByTagName("input");
    for (var i = 0; i < items.length; i++) {
        items[i].value = null;
        items[i].name = counter + '_' + items[i].name;
    }
    
    var i = e;
    while (1 <= i &&...