javascript - cash denomination calculator -

i've created cash denomination calculator in jquery, , it's working fine once add entry suppose if try change entries it's not calculating values expected.

just fill values , you'll total of all, if try change value of input box inside div '.mul_by' class[i.e. small input box before '=' sign] it's not calculating total properly.

and here's jsfiddle same.

$('.mul_by').each(function (i) {      var _this = $(this),          //set default input value 0 inside .mul-by div          setzero = _this.find('.form-control').val(0),          //set default input value 0 inside .mul-val div          setdenominationval = _this.siblings('.mul_val').find('.form-control').val(0),            //set default input value 0 inside .total div          settotalval = $('.total').val(0);      setzero.on('change', function () {          //watch , store input val. inside .mul_by          var getupdatedval = _this.find('.form-control').val(),              //get label text              getdenominationval = parseint(_this.siblings('label').text()),              //update mul_by div after multiplication              updatedenominationval = _this.siblings('.mul_val').find('.form-control');            if (getupdatedval > 0) {              var vals = updatedenominationval.val(getupdatedval * getdenominationval);              total = parseint(settotalval.val()) + parseint(vals.val());              settotalval.val(total);          } else {              updatedenominationval.val(0);          }      });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <form class="form-horizontal">      <div class="form-group">          <label class="control-label col-md-2 col-xs-2" for="batch">2000</label>          <div class="col-md-1 col-xs-4 mul_by">              <span>x </span>&nbsp;<input type="text" class="form-control">          </div>          <div class="col-md-3 col-xs-5 mul_val">              <span style="font-size: 18px;">= </span>&nbsp;<input type="text" class="form-control">          </div>      </div>      <div class="form-group">          <label class="control-label col-md-2 col-xs-2" for="batch">500</label>          <div class="col-md-1 col-xs-4 mul_by">              <span>x </span>&nbsp;<input type="text" class="form-control">          </div>          <div class="col-md-3 col-xs-5 mul_val">              <span style="font-size: 18px;">= </span>&nbsp;<input type="text" class="form-control">          </div>      </div>      <div class="form-group">          <label class="control-label col-md-2 col-xs-2" for="batch">100</label>          <div class="col-md-1 col-xs-4 mul_by">              <span>x </span>&nbsp;<input type="text" class="form-control">          </div>          <div class="col-md-3 col-xs-5 mul_val">              <span style="font-size: 18px;">= </span>&nbsp;<input type="text" class="form-control">          </div>      </div>      <div class="form-group">          <hr>          <label class="control-label col-md-2 col-xs-2" for="batch">total:</label>          <div class="col-md-3 col-xs-5 mul_val">              <span style="font-size: 18px;">= </span>&nbsp;<input type="text" class="form-control total">          </div>      </div>  </form>

how update total after making changes?

hope understand it. in advance help.

please check code proper result had made lot of changes @ end hope desired result:-

$(document).ready(function () {     $('.mul_by').each(function (i) {         var _this = $(this),     //set default input value 0 inside .mul-by div             setzero = _this.find('.form-control').val(0),     //set default input value 0 inside .mul-val div                 setdenominationval = _this.siblings('.mul_val').find('.form-control').val(0);      //set default input value 0 inside .total div         settotalval = $('.total').val(0);                setzero.on('change', function () {     var getcurrentval = $(this).val();     console.log('getcurrentval',getcurrentval)     //watch , store input val. inside .mul_by             var getupdatedval = _this.find('.form-control').val(),       //get label text                     getdenominationval = parseint(_this.siblings('label').text()),       //update mul_by div after multiplication                     updatedenominationval = _this.siblings('.mul_val').find('.form-control');                 console.log(getupdatedval,getdenominationval)        var vals = 0,total=0;             if(getupdatedval > 0){         if(updatedenominationval.val()>0){             vals = updatedenominationval.val(getupdatedval * getdenominationval -   updatedenominationval.val());            total = parseint(settotalval.val()) + parseint(vals.val()) ;           updatedenominationval.val(getupdatedval * getdenominationval);           console.log('total',total,'settotal',settotalval.val(),vals.val());         }         else{             vals = updatedenominationval.val(getupdatedval * getdenominationval);           updatedenominationval.val(getupdatedval * getdenominationval);           total = parseint(settotalval.val()) + parseint(vals.val());         }         console.log(vals.val());                   settotalval.val(total);             } else{                 updatedenominationval.val(0);             }         });     }); });