Not working HTML table rows from jQuery append()

Question

How to create rows in tables by append() that still be able to operate with math operations?

Now I have row in HTML including netto price, amount, discount, tax rate and brutto price - brutto price is shown after input netto and amount, tax is selected from , but it's working only for HTML generated row, not for jQuery append. How to fix it?

HTML

<table class="table table-striped table-bordered" id="invoice">
    <thead>
        <tr>
             <th class="col-xs-0">Lp.</th>
             <th class="col-xs-4">Towar/usługa</th>
             <th class="col-xs-1">PKWiU</th>
             <th class="col-xs-1">Ilość</th>
             <th class="col-xs-1">Jedn.</th>
             <th class="col-xs-1">Cena netto</th>
             <th class="col-xs-1">Rabat</th>
             <th class="col-xs-2">VAT</th>
             <th class="col-xs-1">Cena brutto</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <th><p class="form-control-static">1.</p></th>
             <td>
                 <div class="form-group input-sm">
                     <input type="text" name="product[]" class="form-control" required>
                 </div>
             </td>
             <td>
                 <div class="form-group input-sm">
                     <input type="text" name="pkwiu[]" class="form-control">
                 </div>
             </td>
             <td>
                 <div class="form-group input-sm">
                     <input type="text" name="quantity[]" class="form-control quantity" required>
                 </div>
             </td>
             <td>
                 <div class="form-group input-sm">
                     <input type="text" name="unit[]" class="form-control">
                 </div>
             </td>
             <td>
                 <div class="form-group input-sm">
                     <input type="text" name="nettoprice[]" class="form-control nettoprice" required>
                 </div>
             </td>
             <td>
                  <div class="form-group input-sm">
                      <input type="text" name="discount[]" class="form-control discount">
                  </div>
             </td>
             <td>
                 <div class="form-group">
                     <div class="col-xs-12">
                         <select class="form-control vatrate" name="vatrate[]" form="invoice">
                             <option value="0">zw.</option>
                             <option value="1.00">0%</option>
                             <option value="1.05">5%</option>
                             <option value="1.08">8%</option>
                             <option value="1.23" selected>23%</option>
                         </select>
                     </div>
                 </div>
             </td>
             <td>
                 <div class="form-group input-sm">
                    <input type="text" name="bruttoprice[]" class="form-control bruttoprice" value="">
                </div>
            </td>
        </tr>
    </tbody>
</table>

jQuery

var x = 2;
$("#addProduct").click(function(){
        $row = '<tr>' +
            '<th>'+x+'.</th>' +
                '<td>' +
                    '<div class="form-group input-sm">' +
                        '<input type="text" name="product[]" class="form-control" required>' +
                    '</div>' +
                '</td>' +
                '<td>' +
                    '<div class="form-group input-sm">' +
                        '<input type="text" name="pkwiu[]" class="form-control">' +
                    '</div>' +
                '</td>' +
                '<td>' +
                    '<div class="form-group input-sm">' +
                        '<input type="text" name="quantity[]" class="form-control quantity" required>' +
                    '</div>' +
                '</td>' +
                '<td>' +
                    '<div class="form-group input-sm">' +
                        '<input type="text" name="unit[]" class="form-control">' +
                    '</div>' +
                '</td>' +
                '<td>' +
                    '<div class="form-group input-sm">' +
                        '<input type="text" name="nettoprice[]" class="form-control nettoprice" required>' +
                    '</div>' +
                '</td>' +
                '<td>' +
                    '<div class="form-group input-sm">' +
                        '<input type="text" name="discount[]" class="form-control discount">' +
                    '</div>' +
                '</td>' +
                '<td>' +
                    '<div class="form-group">' +
                        '<div class="col-xs-12">' +
                            '<select class="form-control vatrate" name="vatrate[]" form="invoice">' +
                                '<option value="0">zw.</option>' +
                                '<option value="1.00">0%</option>' +
                                '<option value="1.05">5%</option>' +
                                '<option value="1.08">8%</option>' +
                                '<option value="1.23" selected>23%</option>' +
                            '</select>' +
                        '</div>' +
                    '</div>' +
                '</td>' +
                '<td>' +
                    '<div class="form-group input-sm">' +
                        '<input type="text" name="bruttoprice[]" class="form-control bruttoprice" value="">' +
                    '</div>' +
                '</td>' +
            '</tr>';
        $('#invoice > tbody:last').append($row);
    x=x+1;
});

$("#deleteProduct").click(function(){
    $("tbody > tr:last").remove();
    if(x > 1) {
        x = x - 1;
    }
});

$('select').on('change', function () {
                var vat = this.selectedOptions[0].value;
                console.log(vat);
});

$(":input").on('input', function(){    
    var $tr = $(this).closest("tr");
        var netto = parseFloat($tr.find('.nettoprice').val()),
            quantity = parseFloat($tr.find('.quantity').val()),
            vat = parseFloat($tr.find('.vatrate').val()),
            discount = parseFloat($tr.find('.discount').val());

            if(isNaN(discount)) {
                discount = 1;
            } else {
                discount = discount / 100;
                discount = 1 - discount;
            }            

            if(vat == 0 || vat == -1) {
                vat = 1;
            }
        var v = '';
    console.log(netto, quantity, vat, discount);
        if(!isNaN(netto) && !isNaN(vat) && !isNaN(quantity)) {
            v = netto * quantity * discount * vat;
            v = v.toFixed(2);
        }
        $tr.find('.bruttoprice').val(v.toString());
    });

Answer 1

Remove the last or make it :last-child :

$('#invoice > tbody').append($row);
$('#invoice > tbody:last-child').append($row);

Answer 2

Either remove the :last from it:

 $('#invoice > tbody').append($row);

or use it with .after() with the :last tr of the table:

 $('#invoice > tbody tr:last').after($row);

Answer 3

Okay, I found mistake - function works fine now.

$(document).on('input', ':input', function(){
/* Foo */
});