Separating input values

Question

I have this https://codepen.io/anon/pen/RgQOWz

It has increment/decrement and it does what I want, but the problem is they both change together and I want to separate counter 1 from counter 2 meaning if I want to change counter 1 values it doesn't have to effect counter 2 and vice versa.

I can basically give counter 2 different class names and write another script for it but that is a lot of work considering the counters will be many.

so how do I do this?

Javascript code

$(".increment").click(function() {
  var score1 = $(".score").val();
  score1++;
  $(".score").val(score1);
});

$(".decrement").click(function() {
  var score1 = $(".score").val();
  if (score1 == 0) {
  } else {
    score1--;
    $(".score").val(score1);
  }
});

Questions seeking debugging help ("**why isn't this code working?**") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself**. Questions without a **clear problem statement** are not useful to other readers. See: [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). — Heretic Monkey, Jun 30 '17 at 17:21
Unrelated to the question, but your code has duplicate IDs. You'll want to remedy that. — Tyler Roper, Jun 30 '17 at 17:23

score 1 · Answer 1 · answered Jun 30 '17 at 17:28

Both counters using elements with the same .score class to keep the score. So each element updates both .score. You should either use IDs instead of classes, or (preferably) dynamically create elements and assign behaviors directly.

For example:

Karthik Ganesan · Accepted Answer · 2017-06-30T17:39:11.210

Change you JavaScript to this

$(".increment").click(function() {

  var score1 = $(this).next().find('.score').val();
  score1++;
  $($(this).next().find('.score').val(score1));
});

$(".decrement").click(function() {
  var score1 = $(this).prev().find('.score').val();
  if (score1 == 0) {
  } else {
    score1--;
    $(this).prev().find('.score').val(score1);
  }
});

instead of setting value to .score find the score based on which increment or decrement selection was selected

here is a working codepen https://codepen.io/anon/pen/xrYoRr#anon-login

score 0 · Answer 3 · answered Jun 30 '17 at 17:29

I have made some changes to your code:

<div class="row">
  <div class="col-xs-6">
    <div class="row end-xs">      
      <div class="row middle-xs">
          <p>Counter1</p>
      </div>       
      <div class="prdin">
        <div class="increment-c1">
          <i class="icon-arrow-up icons"></i>
        </div>
        <div id="input1">
          <input type="number" class="score1" value="0">
        </div>
        <div class="decrement-c1">
          <i class="icon-arrow-down icons"></i>
        </div>
      </div>   
    </div>
  </div>

  <div class="col-xs-6">
    <div class="row start-xs">
      <div class="prdin">
        <div class="increment-c2">
          <i class="icon-arrow-up icons"></i>
        </div>
        <div id="input2">
          <input type="number" class="score2" value="0">
        </div>
        <div class="decrement-c2">
          <i class="icon-arrow-down icons"></i>
        </div>
      </div>
      <div class="row middle-xs">
          <p>Counter2</p>
      </div>
    </div>
  </div>
</div>

And javascript code as below:

$(".increment-c1").click(function() {
  var score1 = $(".score1").val();
  score1++;
  $(".score1").val(score1);
});

$(".decrement-c1").click(function() {
  var score1 = $(".score1").val();
  if (score1 == 0) {
  } else {
    score1--;
    $(".score1").val(score1);
  }
});
$(".increment-c2").click(function() {
  var score1 = $(".score2").val();
  score1++;
  $(".score2").val(score1);
});

$(".decrement-c2").click(function() {
  var score1 = $(".score2").val();
  if (score1 == 0) {
  } else {
    score1--;
    $(".score2").val(score1);
  }
});

Thanks for your work, but I have said in op that I can do that way and so the counters can be as many as 20, so this solution won't help. — user7716943, Jun 30 '17 at 17:48
ok. @Karthik Ganesan's answer has solved the problem. I guess. — Himanshu Upadhyay, Jun 30 '17 at 17:50

Separating input values

3 Answers3