title: Calculate invoice form with Javascript
body: <p>I am trying to create dynamic invoice form which calculates sums once numbers are entered. I have combination of input fields and drop down (select). I do not know how to combine these two types. I know for select I should use "onchange" but not sure how to combine with the rest.</p>
  
  <p>And the next step, to have dynamic form, is to be able add (and remove) rows. I have no idea how I would add it. I realize I need unique names for each item.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  $('input').keyup(function(){
      var qty1  = Number($('#qty1').val());
      var price1 = Number($('#price1').val());
    var percentage1  = Number($('#percentage1').val());
  
      $('#sum1').html(qty1 * price1);
      $('#total1').html(qty1 * price1 * percentage1);    
  /*
      var qty2  = Number($('#qty2').val());
      var price2 = Number($('#price2').val());
    var percentage2  = Number($('#percentage2').val());
  
      $('#sum2').html(qty2 * price2);
      $('#total2').html(qty2 * price2 * percentage2); 
  
     $('#grand_total').html(total1 + total2);    
  */
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form&gt;
    &lt;table&gt;
    &lt;tr&gt;&lt;td&gt;name&lt;/td&gt;&lt;td&gt;quantity&lt;/td&gt;&lt;td&gt;price&lt;/td&gt;&lt;td&gt;sum&lt;/td&gt;&lt;td&gt;%&lt;/td&gt;&lt;td&gt;total&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="text" name="item1" size=15 required /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" id="qty1" size=5 required /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" id="price1" size=5 required /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;span id="sum1"&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;&lt;select name="percentage1"&gt;&lt;option value="0.1"&gt;10%&lt;/option&gt;&lt;option value="0.2"&gt;20%&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;
      &lt;td&gt;&lt;span id="total1"&gt;&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;
    &lt;/form&gt;
    
    &lt;p&gt;
    grand total: &lt;span id="grand_total"&gt;&lt;/span&gt;
    &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any ideas, please?</p>