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>');
     $('.quantity , .price').unbind().on('change', function() {
        UpdateTotals(this);
    });
    });
});

$(document).ready(function() {
    $counter = 1;
    $('#buttondelete').click(function() {
        $counter++;
        $('#invoiceitems > tbody:last').remove('<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>
                                              ...