title: Auto calculation value getting change in text-box but not in dom
body: <p>I struck up with a weird problem :I am done a calculation based on change in the value in the quantity cell will multiply by parent cell in a row<br>
  <strong>Here my fiddle link :</strong><a href="https://jsfiddle.net/hahkarthick/0y0d4vge/16/" rel="nofollow noreferrer">https://jsfiddle.net/hahkarthick/0y0d4vge/16/</a></p>
  
  <p>So far the calculation works perfectly the only problem is when i check the dom i didn't see any change in value that i see it remains old value </p>
  
  <p>(i.e:)2 is cell and 0 in quantity cell if change quantity to 5 then 2 get multiplied with 5 and changed to 10 ,but when i check the Dom the value remains 2 .</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('.quantity').on('change, keyup', function() {
      var val = $(this).val();
      console.log(val)
        // To avoid auto inc while pressing arrow keys
      var preVal = $(this).data('val');
  
      $(this).data('val', val);
      //To avoid auto inc while pressing arrow keys //
      if (val == '' || isNaN(val) || val &lt; 1 || val == undefined) {
        val = 1;
      }
  
  
  
      $(this).parent().siblings().each(function() {
        var oldval = $(this).find('.calc').data("val") || $(this).find('.calc').val() || "0";
        var arr = String(oldval).split("[");
        console.log(arr);
        //var newval = val * oldval;
        var newval = (val * parseFloat(arr[0])).toFixed(2);
  
        console.log(newval);
        if (arr.length &gt; 1) {
          newval = newval + "[" + arr[1];
        }
  
         $(this).find('.calc').val(newval); 
      });
      autoSum();
    });
  
    autoSum();
  });
  
  function autoSum() {
  
    var $dataRows = $("#sum_table tr:not('.total, .title')");
    var totals = [0, 0, 0];
    $dataRows.each(function() {
      $(this).find('input').each(function(i) {
        totals[i] += parseFloat($(this).val());
      });
    });
    $("#sum_table td.totalCol").each(function(i) {
      $(this).html("total:" + totals[i]);
    });
  
  }</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;div class="container"&gt;
    &lt;h2&gt;Table calculation&lt;/h2&gt;
    &lt;p&gt;Calculaton&lt;/p&gt;
    &lt;p&gt;Change quantity column for calculation&lt;/p&gt;
    &lt;table class="auto_sum table table-hover" id="sum_table"&gt;
      &lt;thead&gt;
        &lt;tr class="title"&gt;
          &lt;th&gt;value1&lt;/th&gt;
          &lt;th&gt;value2&lt;/th&gt;
          &lt;th&gt;value3&lt;/th&gt;
          &lt;th&gt;Quantity&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;input data-val="20[2]" class="calc" type="text" data-val="" value="20[2]" name=""&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input class="calc" data-val="[10]" type="number" data-val="" value="10" name=""&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input type="number" data-val="10" value="10" name=""&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input class="quantity" type="number" name=""&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;input class="calc" type="number" data-val="5" value="5" name=""&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input class="calc" type="number" data-val="6" value="6" name=""&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input type="number" data-val="" value="12" name=""&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input class="quantity" type="number" name=""&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;input class="calc" type="number" data-val="45" value="45" name=""&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input class="calc" type="number" data-val="23" value="23" name=""&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input type="number" data-val="" value="22" name=""&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input class="quantity" type="number" name=""&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="totalColumn"&gt;
          &lt;td class="totalCol"&gt;Total:&lt;/td&gt;
          &lt;td class="totalCol"&gt;Total:&lt;/td&gt;
          &lt;td class="totalCol"&gt;Total:&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>