JSFiddle - React, Tailwind, and code Playground

by Allendar

HTML

<form action="submit.php" id="mainForm" method="post">
    <table class="horiz" id="customersAdd">
        <tr>
            <th><input class="text" type="button" value="Add Aditional Row" onclick="addRow();" /></th>
        </tr>
        <tr>
            <td><input placeholder="Quantity" type="text" onkeyup="calcRow(this);" /></td>
            <td><input placeholder="Description" type="text" /></td>
            <td><input placeholder="Rate" type="text" onkeyup="calcRow(this);" /></td>
            <td><input placeholder="Amount" type="text" readonly="true" /></td>
        </tr>
    </table>
</form>

CSS

#mainForm .horiz {
    border-collapse: collapse;
    border: 0px;
    text-align: center;
    width: 50%;
}
#mainForm table tr th {
    padding: 20px 0px;
}

JavaScript

function addRow(evt) {
    var tabl = document.getElementById('customersAdd');
    var buffer = tabl.getElementsByTagName('tr')[1].cloneNode(true);
    
    tabl.appendChild(buffer);
    
    var new_tabl = document.getElementById('customersAdd');
    var new_buffer = new_tabl.getElementsByTagName('tr')[new_tabl.getElementsByTagName('tr').length-1];
    var inputs = new_buffer.getElementsByTagName('input');
    
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].value = '';
        inputs[i].setAttribute('onkeyup', 'calcRow(this);');
    }
}

function calcRow(evt) {
    var values = evt.parentNode.parentNode.getElementsByTagName('input');
    
    var quanity = values[0].value * 1;
    var rate = values[2].value * 1;
    var amount = quanity * rate;
    values[3].setAttribute('value', amount);
}