JSFiddle - React, Tailwind, and code Playground

by Jevgeni

HTML

<table id="myinvoice">
    <tr>
        <td>
            <select name='itemone[]'>
                <?php echo $items; ?>
            </select>
        </td>
        <td>
            <input name='itemtwo[]' type="text" class="irow" />
        </td>
        <td id="price" class="price">
            <input name='itemthree[]' type="number" step="any" class="irow" value="0.00" />
        </td>
        <td id="qty" class="qty">
            <input name='itemfour[]' type="number" step="any" class="irow" value="1" />
        </td>
        <td id="linetotal" class="linetotal text-right">
            <p id="amount" class="amount">0.00</p>
            <input name='itemfive[]' type="hidden" class="irow" value="0" />
        </td>
    </tr>
    <tr>
        <td>
            <select name='itemone[]'>
                <?php echo $items; ?>
            </select>
        </td>
        <td>
            <input name='itemtwo[]' type="text" class="irow" />
        </td>
        <td id="price" class="price">
            <input name='itemthree[]' type="number" step="any" class="irow" value="0.00" />
        </td>
        <td id="qty" class="qty">
            <input name='itemfour[]' type="number" step="any" class="irow" value="1" />
        </td>
        <td id="linetotal" class="linetotal text-right">
            <p id="amount" class="amount">0.00</p>
            <input name='itemfive[]' type="hidden" class="irow" value="0" />
        </td>
    </tr>
</table>
<button id="addline" type="button" class="btn btn-primary">Add line</button>

JavaScript

$("#addline").click(function () {
    var newrow = $('#myinvoice tr:last').children("td").map(function () {
        return $(this).html();
    })
    $('#myinvoice tr:last').after('<tr><td>' + $.trim(newrow[0]) + '</td><td><input name="itemtwo[]" type="text" class="irow" /></td><td id="price" class="price"><input name="itemthree[]" type="number" step="any" class="irow" value="0.00" /></td><td id="qty" class="qty"><input name="itemfour[]" type="number" step="any" class="irow" value="1" /></td><td id="linetotal" class="linetotal text-right"><p id="amount" class="amount">0.00</p><input name="itemfive[]" type="hidden" class="irow" value="0" /></td></tr>');
    var oldmh = $('#page-wrapper').css('min-height');
    var newmh = $('#page-wrapper').innerHeight() + parseInt(47);
    $('#page-wrapper').css('min-height', newmh);

$(".qty :input").off('keyup',byPrice).on('keyup',byPrice)
$(".price :input").off('keyup',byQty).on('keyup',byQty);

});

function byPrice() {
    console.debug("KEY UP");
    var price = $(this).closest('tr').find('.price input').val(),
        qty = $(this).val();
    $(this).closest('tr').find('.amount').html(parseFloat(price * qty).toFixed(2));
    $(this).closest('tr').find('.linetotal input').val(parseFloat(price * qty).toFixed(2));
}

function byQty() {
    var qty = $(this).closest('tr').find('.qty input').val(),
        price = $(this).val();
    $(this).closest('tr').find('.amount').html(parseFloat(price * qty).toFixed(2));
    $(this).closest('tr').find('.linetotal input').val(parseFloat(price * qty).toFixed(2));
}

$(".qty :input").keyup(byPrice);
$(".price :input").keyup(byQty);