title: How to calculate invoice total amounts of multiple inputs using jquery?
body: <p>I retrieve all items from <code>order_items</code> table using a <code>foreach</code> loop and then I want to modify quantity and prices of each item.</p>
  <p>What I want is to calculate instantly the <code>subtotal</code> and <code>total</code> amount of all items using jQuery but I couldn't find a way to make it work.</p>
  
  <pre class="lang-js prettyprint-override"><code>$(&quot;.price&quot;).on('change', function() {
    var subtotal = 0;
    var total = 0;
    var total_ht = $(&quot;#total_ht&quot;).val();
    var price = $(this).val();
    var id = $(this).attr('data-id');
    var quantity = $(&quot;#quantity-&quot; + id).val();
  
    subtotal = price * quantity;
    total = subtotal + (subtotal * 20 / 100)
    // Single row subtotal
    $(&quot;#subtotal-&quot; + id).val(subtotal);
    // Single row total
    $(&quot;#total-&quot; + id).val(total);
    // All  rows subtotal
    total_ht = parseFloat(total_ht + subtotal);
    $(&quot;#total_ht&quot;).val(total_ht);
  })
  
  
  $(&quot;.quantity&quot;).on('change', function() {
    var subtotal = 0;
    var total = 0;
    var total_ht = $(&quot;#total_ht&quot;).val();
    var quantity = $(this).val();
    var id = $(this).attr('data-id');
    var price = $(&quot;#price-&quot; + id).val();
  
    subtotal = price * quantity;
    total = subtotal + (subtotal * 20 / 100);
    // Single row subtotal   
    $(&quot;#subtotal-&quot; + id).val(subtotal);
    // Single row total
    $(&quot;#total-&quot; + id).val(total);
    // All  rows subtotal
    $(&quot;#total_ht&quot;).val(total_ht);
  })
  </code></pre>
  <pre><code>&lt;table&gt;
        &lt;tbody&gt;
          &lt;?php foreach($orderItems as $item): ?&gt;
            &lt;tr&gt;
              &lt;td&gt;
                &lt;input type=&quot;number&quot; name=&quot;quantity[]&quot; class=&quot;quantity&quot; value=&quot;&lt;?= $item-&gt;quantity ?&gt;&quot; data-id=&quot;&lt;?= $item-&gt;id ?&gt;&quot; id=&quot;quantity-&lt;?= $item-&gt;id ?&gt;&quot;&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;input type=&quot;number&quot; name=&quot;price[]&quot; class=&quot;form-control price&quot; data-id=&quot;&lt;?= $item-&gt;id ?&gt;&quot; value=&quot;&lt;?= $item-&gt;unity_price ?&gt;&quot; id=&quot;price-&lt;?= $item-&gt;id ?&gt;&quot;&gt;
              &lt;/td&gt;
  
              &lt;td&gt;
                &lt;input type=&quot;number&quot; name=&quot;subtotal[]&quot; class=&quot;subtotal&quot; data-id=&quot;&lt;?= $item-&gt;id ?&gt;&quot; value=&quot;&lt;?= $item-&gt;total_ht_price ?&gt;&quot; id=&quot;subtotal-&lt;?= $item-&gt;id ?&gt;&quot; readonly&gt;
              &lt;/td&gt;
  
              &lt;td&gt;
                &lt;input type=&quot;number&quot; name=&quot;total[]&quot; class=&quot;total&quot; data-id=&quot;&lt;?= $item-&gt;id ?&gt;&quot; value=&quot;&lt;?= $item-&gt;total_ttc_price ?&gt;&quot; id=&quot;total-&lt;?= $item-&gt;id ?&gt;&quot; readonly&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;?php endforeach; ?&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
  
      &lt;table class=&quot;table table-white&quot;&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;th class=&quot;text-left&quot;&gt;Total HT
              &lt;/th&gt;
              &lt;td class=&quot;text-right&quot;&gt;
                  &lt;input type=&quot;number&quot; name=&quot;total_ht&quot; id=&quot;total_ht&quot; class=&quot;form-control total_ht&quot; readonly value=&quot;0&quot;&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th class=&quot;text-left&quot;&gt;TVA
              &lt;/th&gt;
              &lt;td class=&quot;text-right&quot;&gt;
                  &lt;input type=&quot;number&quot; name=&quot;totalTVA&quot; id=&quot;totalTVA&quot; class=&quot;form-control totalTVA&quot; readonly value=&quot;20&quot;&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th class=&quot;text-left&quot;&gt;Total TTC
              &lt;/th&gt;
              &lt;td class=&quot;text-right&quot;&gt;
                  &lt;input type=&quot;number&quot; name=&quot;totalTTC&quot; id=&quot;totalTTC&quot; class=&quot;totalTTC&quot; readonly value=&quot;0&quot;&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          
      &lt;/tbody&gt;
      &lt;/table&gt;
  
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/DOcAQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DOcAQ.png" alt="enter image description here" /></a></p>