JS button, increment/decrement not working on input field correctly

Question

I have an issue getting the javascript increase/decrease buttons on my site to work. When I declare my JS variable as the class name of my input field, if I hit the button it increases/decreases all of the input fields like this:

However, when I use the ID of my input field, it increases/decreases the first row, but the buttons on all of the other buttons don't work. I'm not sure what I'm doing wrong here. The JS is obviously working but how can I get it to work for each row/button respectively.

The html of my laravel blade:

@foreach ($pgroup->pskus as $psku)
<tr>
<td>
  <div>
  <button id="subtract" class="remove-button md-btn" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">remove</i></button>
  <input type="text" class="md-input" id="{{ $psku->quantity_id }}" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" value='0'  />
  <button id="add" class="add-button md-btn md-btn-success"  style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button>
  </div>
  </td>
  </tr>
  @endforeach

And my JS:

@section('loadjs')
<script src="{{ jfi\asset_cb('/js/pagination.js') }}"></script>
<script src="{{ jfi\asset_cb('/bower_components/uikit/js/components/slider.js') }}"></script>
<script src="{{ jfi\asset_cb('/js/factory.js') }}"></script>
<script src="{{ jfi\asset_cb('/js/jquery.min.js') }}"></script>
<script type="text/javascript">
$("#add").click(function(){
var value = $(".md-input").val();
value = +value + 1;
$(".md-input").val(value);
});

$("#subtract").click(function(){
var value = $(".md-input").val();
value = +value - 1;
$(".md-input").val(value);
});
</script>
@endsection

As you can see, my JS code is currently using the class of my input field which is making one button affect all input fields.

How can I rectify this to work correctly?

UPDATE: New Code that I'm attempting:

Html:

<div>
<button class="subtract" class="remove-button md-btn" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">remove</i></button>
<input type="text" class="md-input" id="{{ $psku->quantity_id }}" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" value='0' />
<button class="add" class="add-button md-btn md-btn-success" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button>
</div>

JS:

@section('loadjs')
<script src="{{ jfi\asset_cb('/js/pagination.js') }}"></script>
<script src="{{ jfi\asset_cb('/bower_components/uikit/js/components/slider.js') }}"></script>
<script src="{{ jfi\asset_cb('/js/factory.js') }}"></script>
<script src="{{ jfi\asset_cb('/js/jquery.min.js') }}"></script>
<script type="text/javascript">
$(".add").click(function() {
  var inputField = $(this).prev('input'), /* get the input field */
      value = parseInt( inputField.val() ); /* get its value and parse it as integer */
  value += 1; /* add one */
  inputField.val(value); /* put the value back */
});

$(".subtract").click(function() {
  var inputField = $(this).next('input'),
      value = parseInt( inputField.val() );
  value -= 1;
  inputField.val(value);
});
</script>
@endsection

Answer 1

As already commented, you should have unique id's on a page.

So rather change id="add" to class="id" .

I've updated the function, see the comments in the code for some explanation.

 $(".add-button").click(function() { var inputField = $(this).prev('input'), /* get the input field */ value = parseInt( inputField.val() ); /* get its value and parse it as integer */ value += 1; /* add one */ inputField.val(value); /* put the value back */ }); $(".remove-button").click(function() { var inputField = $(this).next('input'), value = parseInt( inputField.val() ); value -= 1; inputField.val(value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td> <div> <button class="remove-button md-btn" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">remove</i></button> <input type="text" class="md-input" id="{{ $psku->quantity_id }}" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" value='0' /> <button class="add-button md-btn md-btn-success" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button> </div> </td> </tr> <tr> <td> <div> <button class="remove-button md-btn" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">remove</i></button> <input type="text" class="md-input" id="{{ $psku->quantity_id }}" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" value='0' /> <button class="add-button md-btn md-btn-success" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button> </div> </td> </tr> <tr> <td> <div> <button class="remove-button md-btn" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">remove</i></button> <input type="text" class="md-input" id="{{ $psku->quantity_id }}" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" value='0' /> <button class="add-button md-btn md-btn-success" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button> </div> </td> </tr> <tr> <td> <div> <button class="remove-button md-btn" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">remove</i></button> <input type="text" class="md-input" id="{{ $psku->quantity_id }}" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" value='0' /> <button class="add-button md-btn md-btn-success" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button> </div> </td> </tr> </table> 

Answer 2

you have some error in your code: first of all you can not have multiple time the same id, you can use classes for this kind of thing... moreover I suggest you to add a class to the containing div, handling the events from that in order to be always sure what and where you are incrementing/decrementing and in order to have less listener in you script

 @section('loadjs') <script src="{{ jfi\\asset_cb('/js/pagination.js') }}"></script> <script src="{{ jfi\\asset_cb('/bower_components/uikit/js/components/slider.js') }}"></script> <script src="{{ jfi\\asset_cb('/js/factory.js') }}"></script> <script src="{{ jfi\\asset_cb('/js/jquery.min.js') }}"></script> <script type="text/javascript"> $('.incrementer-class-name').each(function() { var $this = $(this); var $input = $this.find('.md-input'); $this.on('click', '.add-button', function() { var val = parseInt($input.val()); $input.val(++val); }).on('click', '.remove-button', function() { var val = parseInt($input.val()); $input.val(--val); }); }); </script> @endsection 

 @foreach ($pgroup->pskus as $psku) <tr> <td> <div class="incrementer-class-name"> <button class="remove-button md-btn" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">remove</i></button> <input type="text" class="md-input" id="{{ $psku->quantity_id }}" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" value='0' /> <button class="add-button md-btn md-btn-success" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button> </div> </td> </tr> @endforeach