How to use increment number to do the math and update the result in jQuery

Question

I have set of number to do the total cost - 1).The pre-defined cost 2).The variable amount of pax and 3).Total

I can make the form to get the increment but want to update these values into the result.

Fiddle here : https://jsfiddle.net/ceksng83/11/

$(".numbers-row").append('<div class="inc button_inc">+</div><div class="dec button_inc">-</div>');
$(".button_inc").on("click", function() {
  var $button = $(this);
  var oldValue = $button.parent().find("input").val();

  if ($button.text() == "+") {
    var newVal = parseFloat(oldValue) + 1;
  } else {
    // Don't allow decrementing below zero
    if (oldValue > 1) {
      var newVal = parseFloat(oldValue) - 1;
    } else {
      newVal = 0;
    }
  }
  $button.parent().find("input").val(newVal);
  //update span to do the math and update #total_ad

  var cost_ad=$('#cost_ad').attr('value');//pre-defined value from attribute-value
  var amt_ad=$(this).find('#amt_ad').val(newVal);//update value from increment
  $('#total_ad').txt(cost_ad*amt_ad);//math result from multiply
});

.numbers-row {
  position: relative;
  width: 97px;
  height: 40px;
  overflow: visible;
}

.numbers-row.list {
  margin: auto;
  margin-bottom: 5px;
  margin-top: 15px;
}

input.qty2 {
  position: relative;
  width: 35px;
  height: 40px;
  border-radius: none;
  text-align: center;
  left: 31px;
  font-size: 12px;
  padding: 5px;
}

.button_inc {
  text-indent: -9999px;
  cursor: pointer;
  position: absolute;
  width: 33px;
  height: 40px;
  z-index: 9;
}

.dec {
  background: #fff url('https://www.ecobank.com/img/iconMinus.gif') no-repeat center center;
  border: 1px solid #cccccc;
  left: 0;
  top: 0;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-bottomleft: 4px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.inc {
  background: #fff url('https://www.ecobank.com/img/iconPlus.gif') no-repeat center center;
  right: 0;
  top: 0;
  border: 1px solid #cccccc;
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-6 col-sm-6">
    <div class="form-group">
      <label>Adults</label>
      <div class="numbers-row">
        <input type="text" value="1" class="qty2 form-control" name="qty_ad" data-pax="amt_ad">
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-6">
    <div class="form-group">
      <label>Children</label>
      <div class="numbers-row">
        <input type="text" value="0" class="qty2 form-control" name="qty_ch" data-pax="amt_ch">
      </div>
    </div>
  </div>
</div>
<hr />
Adult Price = <span id="cost_ad" value="100">100</span> x <span id="amt_ad">1</span> = <span id="total_ad"></span><br />
Child Qty <span id="amt_ch"></span>

Answer 1

Here you go with a solution https://jsfiddle.net/ceksng83/15/

$(".numbers-row").append('<div class="inc button_inc">+</div><div class="dec button_inc">-</div>');
$(".button_inc").on("click", function() {
  var $button = $(this);
  var oldValue = $button.parent().find("input").val();

  if ($button.text() == "+") {
    var newVal = parseFloat(oldValue) + 1;
  } else {
    // Don't allow decrementing below zero
    if (oldValue > 1) {
      var newVal = parseFloat(oldValue) - 1;
    } else {
      newVal = 0;
    }
  }
  $button.parent().find("input").val(newVal);
  //update span to do the math and update #total_ad
  $('#' + $(this).siblings('input').data('pax')).text(newVal);
  
  var cost_ad = parseInt($('#cost_ad').attr('value'));//pre-defined value from attribute-value
  var amt_ad = parseInt($('#amt_ad').text());//update value from increment
  $('#total_ad').html(cost_ad*amt_ad);//math result from multiply
});

.numbers-row {
  position: relative;
  width: 97px;
  height: 40px;
  overflow: visible;
}

.numbers-row.list {
  margin: auto;
  margin-bottom: 5px;
  margin-top: 15px;
}

input.qty2 {
  position: relative;
  width: 35px;
  height: 40px;
  border-radius: none;
  text-align: center;
  left: 31px;
  font-size: 12px;
  padding: 5px;
}

.button_inc {
  text-indent: -9999px;
  cursor: pointer;
  position: absolute;
  width: 33px;
  height: 40px;
  z-index: 9;
}

.dec {
  background: #fff url('https://www.ecobank.com/img/iconMinus.gif') no-repeat center center;
  border: 1px solid #cccccc;
  left: 0;
  top: 0;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-bottomleft: 4px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.inc {
  background: #fff url('https://www.ecobank.com/img/iconPlus.gif') no-repeat center center;
  right: 0;
  top: 0;
  border: 1px solid #cccccc;
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-md-6 col-sm-6">
    <div class="form-group">
      <label>Adults</label>
      <div class="numbers-row">
        <input type="text" value="1" class="qty2 form-control" name="qty_ad" data-pax="amt_ad">
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-6">
    <div class="form-group">
      <label>Children</label>
      <div class="numbers-row">
        <input type="text" value="0" class="qty2 form-control" name="qty_ch" data-pax="amt_ch">
      </div>
    </div>
  </div>
</div>
<hr />
Adult Price = <span id="cost_ad" value="100">100</span> x <span id="amt_ad">1</span> = <span id="total_ad"></span><br />
Child Qty <span id="amt_ch"></span>

Hope this will help you.