Show the total value of increase and decrease amount

Question

I am new to jQuery. I am trying to increase and decrease value on click on the button. Now I want to show the sum of three input on total input.

Here is what I tried :

var cartButtons = $('.cart-plus-minus').find('button');
$(cartButtons).on('click', function(e) {
  e.preventDefault();
  var $this = $(this);
  var target = $this.parent().data('target');
  var target = $('#' + target);
  var current = parseFloat($(target).val());
  if ($this.hasClass('cart-plus-1'))
    target.val(current + 1);
  else {
    (current < 2) ? null: target.val(current - 1);
  }
});

body {
  width: 500px;
  margin: 0 auto;
}

a {
  text-decoration: none;
  margin-bottom: 20px;
}

.cart-plus-minus {
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Increment / Decrement an 'amount' input.</h1>

<a href="" class="a-link">
  <label> Total amount is: </label>
  <input type="text" placeholder="" value="0">
</a>
<div class="cart-plus-minus" data-target="amount-1">
  <button class="btn cart-minus-1">-</button>
  <input type="number" id="amount-1" value="1" min="1" max="300">
  <button class="btn cart-plus-1">+</button>
</div>

<div class="cart-plus-minus" data-target="amount-2">
  <button class="btn cart-minus-1">-</button>
  <input type="number" id="amount-2" value="1" min="1" max="300">
  <button class="btn cart-plus-1">+</button>
</div>
<div class="cart-plus-minus" data-target="amount-2">
  <button class="btn cart-minus-1">-</button>
  <input type="number" id="amount-2" value="1" min="1" max="300">
  <button class="btn cart-plus-1">+</button>
</div>

Thanks in advance.

Answer 1

You need to iterate on the inputs and add the value of these to a variable. And then set it as an input value to the total input field.

  var total = 0;

  $('.cart-plus-minus input').each(function(){
    total += +this.value;
  });

  $("#total").val(total);

var cartButtons = $('.cart-plus-minus').find('button');

$(cartButtons).on('click', function(e) {
  e.preventDefault();
  var $this = $(this);
  var target = $this.parent().data('target');
  var target = $('#' + target);
  var current = parseFloat($(target).val());
  if ($this.hasClass('cart-plus-1'))
    target.val(current + 1);
  else {
    (current < 2) ? null: target.val(current - 1);
  }
  
  var total = 0;
  $('.cart-plus-minus input').each(function(){
    total += +this.value;
  });
  
  $("#total").val(total);
  
});

body {
  width: 500px;
  margin: 0 auto;
}

a {
  text-decoration: none;
  margin-bottom: 20px;
}

.cart-plus-minus {
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Increment / Decrement an 'amount' input.</h1>

<a href="" class="a-link">
  <label> Total amount is: </label>
  <input id="total" type="text" placeholder="" value="3">
</a>
<div class="cart-plus-minus" data-target="amount-1">
  <button class="btn cart-minus-1">-</button>
  <input type="number" id="amount-1" value="1" min="1" max="300">
  <button class="btn cart-plus-1">+</button>
</div>

<div class="cart-plus-minus" data-target="amount-2">
  <button class="btn cart-minus-1">-</button>
  <input type="number" id="amount-2" value="1" min="1" max="300">
  <button class="btn cart-plus-1">+</button>
</div>
<div class="cart-plus-minus" data-target="amount-3">
  <button class="btn cart-minus-1">-</button>
  <input type="number" id="amount-3" value="1" min="1" max="300">
  <button class="btn cart-plus-1">+</button>
</div>