title: change event is summing value instead of replacing
body: <p>Suppose total amount <code>50</code>, I <strong>add</strong> <code>10</code> in <strong>vat</strong> input and <strong>minus</strong> <code>20</code> from <strong>discount</strong>, correct result -<code>40</code> is shown in <strong>grand total</strong>, at first time. </p>
  
  <p>But, if I change <code>-20</code> to <code>-10</code> in discount input, I mean overriding previous value(<code>-20</code>), then result should be <code>50</code> but it becomes <code>30</code>. It is adding <strong>10 with 20</strong> instead of setting new value <code>10</code> and clearing previous <code>20</code>, </p>
  
  <p><strong>After each typed value it is summing new input with previous one, instead of overwrite or replacing.</strong></p>
  
  <p>Here, for the first time, it is fine</p>
  
  <p>Grand Total <strong>=</strong> <code>50</code> <strong>+</strong> <code>10</code> = <code>60</code> <strong>-</strong> <code>20</code> <strong>=</strong> <code>40</code> </p>
  
  <p><a href="https://i.stack.imgur.com/jFN2S.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jFN2S.jpg" alt="Correct Result"></a></p>
  
  <p>Let, retype in discount field, changed <code>-20</code> to <code>-10</code>, but here it has calculated assuming discount value as <code>-30</code>(adding (-20)+(-10)), </p>
  
  <p><strong>Thus Grand total becomes 30 instead of 50</strong> </p>
  
  <p><a href="https://i.stack.imgur.com/kzumP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kzumP.jpg" alt="enter image description here"></a></p>
  
  <p>Well, if I set value <code>0</code>, the problem will be solved, it will reset, but adding 0 and resetting each time is not user friendlier. </p>
  
  <p>To be more clear, I am generating simple bill system through <code>Jquery</code></p>
  
  <p>First fall each <code>rate[]</code> input and <code>qnt[]</code> input is multiplied with each other and amount is generated and <code>val</code> in <code>amnt[]</code> input. </p>
  
  <p>And, discount, vat other condition are applied with <code>dsc_vat[]</code>, to total sum of each dynamic <code>amnt[]</code>.</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>$(document).ready(function(){
  
      $('input[name="rate[]"], input[name="qnt[]"]').each(function(){
          var elmnt = $(this);
          $(this).change(function(){
              var qnt = $(this).parents('table').find('input[name="qnt[]"]').val();
              var rte = $(this).parents('table').find('input[name="rate[]"]').val();
  
              if(qnt &gt; 0 &amp;&amp; rte &gt; 0){
                  var amnt = qnt*rte;
                  $(elmnt).parents('table').find('input[name="amnt[]"]').val(amnt);
                  g_ttl();
              }
          })
      })
  
        $('input[name="dsc_vat[]"]').on("change",function(){
          var value = $(this).val();
          var sum = parseInt($(this).parents('table').find('.g_ttl').val());
          if (value!==''){
              if(value[value.length -1]==='%'){
                  gttl = ((sum*parseInt(value))/100);    // for percent input
              }
              if(value[value.length -1]!=='%'){
                  gttl = parseInt(value);      // for digit input
              }
              $(this).parents('table').find('.g_ttl').val(sum+gttl);
          }
          if (value=='' || value==='0'){
              $(this).val('0');
              g_ttl();
              dsc_vat_each();
          }
      })
  })
  
  function g_ttl(){
      var sum = 0;
      $('input[name="amnt[]"]').each(function(){
          var value = $(this).val();
          if(!isNaN(value) &amp;&amp; value.length != 0) {
              sum += parseFloat(value);
          }
          $(this).parents('table').find('.g_ttl').val(sum);
      })
  }
  function dsc_vat_each(){
    $('input[name="dsc_vat[]"]').each(function(){
      var sum = parseInt($(this).parents('table').find('.g_ttl').val());
      if ($(this).val()!==''){
          var value = $(this).val();
          if(value[value.length -1]==='%'){
              gttl = ((sum*parseInt(value))/100);
          }
          if(value[value.length -1]!=='%'){
              gttl = parseInt(value);
          }
              $(this).parents('table').find('.g_ttl').val(sum+gttl);
      }
      if ($(this).val()===''){
          $(this).val('0');
          g_ttl();
      }
    })
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
    &lt;body&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;th&gt;Quantity&lt;/th&gt;
          &lt;th&gt;Rate&lt;/th&gt;
          &lt;th&gt;Total&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;input type='text' value='' name='qnt[]' /&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type='text' value='' name='rate[]' /&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type='text' value='' name='amnt[]' disabled /&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th colspan='2'&gt;Vat&lt;/th&gt;
          &lt;th&gt;&lt;input type='text' value='' name='dsc_vat[]' /&gt;&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th colspan='2'&gt;Discount&lt;/th&gt;
          &lt;th&gt;&lt;input type='text' value='' name='dsc_vat[]' /&gt;&lt;/th&gt;
        &lt;/tr&gt;
        &lt;!-- dsc_vat[] will be add dynamically --&gt;
        &lt;tr&gt;
          &lt;th colspan='2'&gt;Grand Total&lt;/th&gt;
          &lt;th&gt;&lt;input type='text' value='' class='g_ttl' disabled /&gt;&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>