title: How to calculate subtotal and total and show the result using jquery
body: <p>I have a purshase form with two items.
  the first item which is a number box who identify how many adults in the trip.
  the second item which is a number box who identify how many seniors in the trip.
  for example : 
  I want when I select 2 in the first number box, the subtotal next to the number box show me the result of the calculation ( price of one person * 2)
  also for seniors section.</p>
  
  <p>I found a code which is work with select and option value : </p>
  
  <pre><code>update_amounts();
          $('select').change(update_amounts);
  
          function update_amounts() {
              var sum = 0.0;
              $('#tickets &gt; tbody  &gt; tr').each(function () {
                  var qty = $(this).find('option:selected').val();
                  var price = $(this).find('.price').text().replace(/[^\d.]/, '');
                  var amount = (qty * price);
                  sum += amount;
                  $(this).find('.subtotal').text('{{ \App\Helpers\Themes::getSymbolForCurrency() }}' + amount);
              });
              $('#total').val('{{ \App\Helpers\Themes::getSymbolForCurrency() }}' + sum);
          };
  </code></pre>
  
  <p>I have edited this code to my needs like this : </p>
  
  <pre><code>$('input').change(update_amounts);
  
          function update_amounts() {
              var sum = 0.0;
              $('#tickets &gt; tbody  &gt; tr').each(function () {
                  var qty1 = $(this).find('#adults').val();
                  var qty2 = $(this).find('#senior').val();
                  var price = $(this).find('.price').text().replace(/[^\d.]/, '');
  
                  var amount = ((qty1+qty2) * price);
  
                  sum += amount;
                  $(this).find('.subtotal').text('{{ \App\Helpers\Themes::getSymbolForCurrency() }}' + amount);
              });
              $('#total').val('{{ \App\Helpers\Themes::getSymbolForCurrency() }}' + sum);
  
          };
  </code></pre>
  
  <p>But it doesn't work!
  this is the Html code : </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input type="number" name="adult_count" id="adults"   min="0" required&gt;
  
  &lt;input type="number" name="senior_count" id="seniors"   min="0" required&gt;
  </code></pre>
  
  <p>this image shows what I need : 
  <a href="https://i.ibb.co/52qzkh7/stack2.png" rel="nofollow noreferrer">https://i.ibb.co/52qzkh7/stack2.png</a></p>