title: Calculate on change for each row
body: <p>I have an invoice form to generate a PDF. I want to calculate the inputs after the change of the value that the user fills in the form.</p>
  
  <p>I can calculate the first row, but i want to (1) calculate each row and at the end to (2) calculate all the colums properly. For the first step just to the (1) and i will make the total calculation.</p>
  
  <p>The problem is that i generate the rows with dynamic name and id because i post them in an array to the database. For this example the id is the same for every row of inputs.</p>
  
  <p><img src="https://i.stack.imgur.com/HqYhv.png" alt="enter image description here"></p>
  
  <p><strong>PS:</strong> i cannot make <code>.change</code> work and i use <code>$(document).on('change', '#qty', function (e) { calculateLine(); });</code> to trigger the calculation function for each input. I dont know why <code>.change</code> is not working as it support to, with latest jquery.</p>
  
  <p><strong>[invoice.php]</strong></p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function () {
  
          $(document).on('change', '#qty', function (e) { calculateLine(); });
          $(document).on('change', '#price', function (e) { calculateLine(); });
          $(document).on('change', '#discount', function (e) { calculateLine(); });
          $(document).on('change', '#discountPrice', function (e) { calculateLine(); });
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>[invoice.js]</strong></p>
  
  <pre><code>function calculateLine() {
  
      var qty = parseFloat($('#qty').val());
      var price = parseFloat($('#price').val());
      var discount = parseFloat($('#discount').val());
      var discountPrice = parseFloat($('#discountPrice').val());
      var vat = parseFloat($('#vat').val());
  
      var netTotal = 0;
      var total = 0;
      var vatAmount = 0;
  
      if (!qty &amp;&amp; qty == 0) {
          return;
      }
      if (!price &amp;&amp; price == 0) {
          return;
      }
  
      netTotal = qty * price;
  
      if ((!discount || discount == 0) &amp;&amp; discountPrice != 0) {
          discount = (discountPrice / netTotal) * 100;
      }
      if ((!discountPrice || discountPrice == 0) &amp;&amp; discount != 0) {
          discountPrice = (netTotal / 100) * discount;
      }
      if (discountPrice != 0 &amp;&amp; discount != 0) {
          discountPrice = (netTotal / 100) * discount;
      }
      if ((!discount || discount == 0) &amp;&amp; (!discountPrice || discountPrice == 0)) {
          discountPrice = 0;
          discount = 0;
      }
  
      total = netTotal - discountPrice;
  
      if (!total || total == 0) {
          total = 0;
      }
      vatAmount = (total / 100) * vat;
  
      $('#total').val(total);
      $('#discount').val(discount);
      $('#discountPrice').val(discountPrice);
      $('#vatAmount').val(vatAmount);
  
      //calculateTotal();
  }
  </code></pre>
  
  <p><strong>[html]</strong></p>
  
  <pre><code>&lt;tr&gt;
      &lt;td class="col-xs-0"&gt;
          &lt;input type="checkbox" name="selected[]" class="checkall"&gt;
      &lt;/td&gt;
      &lt;td class="col-xs-5"&gt;
          &lt;textarea type="text" name="invoice[item][{{j}}][description]" class="form-control description" rows="1" &gt;&lt;/textarea&gt;
      &lt;/td&gt;
      &lt;td class="col-xs-1"&gt;
          &lt;input type="text" name="invoice[item][{{j}}][unit]" class="form-control unit" value="" /&gt;
      &lt;/td&gt;
      &lt;td class="col-xs-1"&gt;
          &lt;input type="text" name="invoice[item][{{j}}][qty]" class="form-control qty" value="" /&gt;
      &lt;/td&gt;
      &lt;td class="col-xs-1"&gt;
          &lt;input type="text" name="invoice[item][{{j}}][price]" class="form-control price" value="" /&gt;
      &lt;/td&gt;
      &lt;td class="col-xs-1"&gt;
          &lt;input type="text" name="invoice[item][{{j}}][discount]" class="form-control discount" value="" &gt;
      &lt;/td&gt;
      &lt;td class="col-xs-1"&gt;
          &lt;input type="text" name="invoice[item][{{j}}][discountPrice]" class="form-control discountPrice" /&gt;
      &lt;/td&gt;
      &lt;td class="col-xs-1"&gt;
          &lt;input type="text" name="invoice[item][{{j}}][total]" class="form-control total" value="" /&gt;
      &lt;/td&gt;
      &lt;td class="col-xs-1"&gt;
          &lt;input type="text" name="invoice[item][{{j}}][vat]" class="form-control vat" value="{{invcl_vat}}" readonly /&gt;
          &lt;input type="hidden" name="invoice[item][{{j}}][vatAmount]" class="form-control vatAmount" value="" readonly /&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>