JSFiddle - React, Tailwind, and code Playground

HTML

<table border="0" id="invoiceitems">
    <thead>
        <tr>
            <td></td>
            <td><strong>Paper</strong>
            </td>
            <td><strong>Price</strong>
            </td>
            <td><strong>Per Pack</strong>
            </td>
            <td><strong>Quantity</strong>
            </td>
            <td><strong>Total</strong>
            </td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td><strong>Total:</strong>
            </td>
            <td>
                <label class="grandtotal"></label>
            </td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>
                <input type="button" class="buttondelete" value="Delete" />
            </td>
            <td>
                <input type="text" name="item[1][paper]" class="regular-text" value="Glossy   Paper A5" />
            </td>
            <td>
                <input type="text" name="item[1][price]" class="price" value="15.99" />
            </td>
            <td>
                <input type="text" name="item[1][per_pack]" class="per_pack" value="1000" />
            </td>
            <td>
                <input type="text" name="item[1][quantity]" class="quantity" value="1" />
            </td>
            <td>
                <label class="subtotal"></label>
            </td>
        </tr>
    </tbody>
</table>
<p>
    <input type="button" id="buttonadd" value="Add Line" />
</p>

JavaScript

$(document).ready(function () {
    $counter = 1;
    $('#buttonadd').click(function () {
        $counter++;
        $('#invoiceitems > tbody:last').append('<tr><td><input type="button" class="buttondelete" value="Delete"/></td>\
        <td><input type="text" name="item[' + $counter + '][paper]" class="regular-text" value="" /></td>\
        <td><input type="text" name="item[' + $counter + '][price]" class="price" value="" /></td>\
        <td><input type="text" name="item[' + $counter + '][per_pack]" class="per_pack" value="" /></td>\
        <td><input type="text" name="item[' + $counter + '][quantity]" class="quantity" value="" /></td>\
        <td><label class="subtotal"></label> </td></tr>');

    });
    $('table#invoiceitems').on('keyup', '.quantity , .price',function () {
        UpdateTotals(this);
    });

    $counter = 1;
       $('table#invoiceitems').on('click','.buttondelete',function () {
        $counter++;
        if($('table#invoiceitems tbody tr').length==1){
            alert('Cant delete single row');
            return false;
        }
        $(this).closest('tr').remove();
    });
    CalculateSubTotals();
    CalculateTotal();
});


function UpdateTotals(elem) {
    // This will give the tr of the Element Which was changed
    var $container = $(elem).parent().parent();
    var quantity = $container.find('.quantity').val();
    var price = $container.find('.price').val();
    var per_pack = $container.find('.per_pack').val();
    var subtotal = parseInt(quantity) * parseFloat(price) / parseInt(per_pack);
    $container.find('.subtotal').text(subtotal.toFixed(2));
    CalculateTotal();
}

function CalculateSubTotals() {
    // Calculate the Subtotals when page loads for the 
    // first time
    var lineTotals = $('.subtotal');
    var quantity = $('.quantity');
    var price = $('.price');
    var per_pack = $('.per_pack');
    $.each(lineTotals, function (i) {
        var tot = parseInt($(quantity[i]).val()) *...