jQuery Count, count individually

Question

I have counters in my cart and I'm struggling to get the controls to only target the specific counter I'm on. Instead, it's updating them all.

// Product Counter
DecreaseCount = function(){
  var count = $(".quantity__count").val();
  if (count > 0) count--;
  if (count == 0) count = 0;
  $(".quantity__count").val(count);
}

IncreaseCount = function(){
  var count = $('.quantity__count').val();
  if (count < 99) count++;
  if (count == 99) count = 99;
  $('.quantity__count').val(count);
}

// Does both
$('.quantity__decrement').click(function(){
  DecreaseCount();
});
$('.quantity__increment').click(function(){
  IncreaseCount();
});


// What I've tried
//$('.quantity__decrement').each(function(){
//  $(this).on("click", function(){
//    debugger;
//    var count = $(".quantity__count").val();
//    if (count > 0) count--;
//    if (count == 0) count = 0;
//    $(".quantity__count").val(count);
//  }); 
//});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="o-grid o-grid--no-gutter">  
  <div class="quantity o-grid__cell">
    <div class="quantity__decrement">-</div>
    <input type="num" class="quantity__count" value="0" />
    <div class="quantity__increment">+</div>
  </div>
</div>


<div class="o-grid o-grid--no-gutter">
  <div class="quantity o-grid__cell">
    <div class="quantity__decrement">-</div>
    <input type="num" class="quantity__count" value="0" />
    <div class="quantity__increment">+</div>
  </div>
</div>

I've tried using .closest, .siblings etc; I'm a bit stumped and I know this isn't a tricky thing to do.

Any help is appreciated!

Answer 1

You can use the function siblings to select the quantity__count field and bind that element as the this context to provide a cleaner approach.

// Product Counter
DecreaseCount = function() {
              // +--- context this with the selected element.
              // |
              // v
  var count = $(this).val();
  if (count > 0) count--;
  if (count == 0) count = 0;
  $(this).val(count);
}

IncreaseCount = function() {
              // +--- context this with the selected element.
              // |
              // v
  var count = $(this).val();
  if (count < 99) count++;
  if (count == 99) count = 99;
  $(this).val(count);
}

// Does both
$('.quantity__decrement').click(function() {
  var target = $(this).siblings('[class="quantity__count"]').get(0);
                    // +--- Bind the function with the selected element.
                    // |
                    // v
  DecreaseCount.bind(target)();
});

$('.quantity__increment').click(function() {
  var target = $(this).siblings('[class="quantity__count"]').get(0);
                    // +--- Bind the function with the selected element.
                    // |
                    // v
  IncreaseCount.bind(target)();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="o-grid o-grid--no-gutter">
  <div class="quantity o-grid__cell">
    <div class="quantity__decrement">-</div>
    <input type="num" class="quantity__count" value="0" />
    <div class="quantity__increment">+</div>
  </div>
</div>


<div class="o-grid o-grid--no-gutter">
  <div class="quantity o-grid__cell">
    <div class="quantity__decrement">-</div>
    <input type="num" class="quantity__count" value="0" />
    <div class="quantity__increment">+</div>
  </div>
</div>