Select the correct input when using input group after pressing a button

Question

Introduction: I'm creating a form using bootstrap and I have different input groups with the same structure and functionality.

All of them have a '-' button on the left and a '+' button on the right of the input field and, when one of them is pressed, the input value has to change.

Problem: As the buttons are inside a div with class="input-group-btn" and they are not siblings of the input field, I don't know which is the best way to select it.

I have managed to make it work but I'm not sure if it's the best way to do it.

JavaScript and HTML

$(".increase").click(function() {
 var amount = parseInt($(this).parents('.input-group').children('input').val());
 if (amount < 20) {
 $(this).parents('.input-group').children('input').val(amount + 1);
 }
});
$(".decrease").click(function() {
 var amount = parseInt($(this).parents('.input-group').children('input').val());
 if (amount > 0) {
 $(this).parents('.input-group').children('input').val(amount - 1);
 }
});

<form class="form-inline">
 <div class="form-group">
 <div class="input-group">
 <div class="input-group-btn">
 <button type="button" class="btn btn-default decrease"><span class="glyphicon glyphicon-minus"></span>
 </button>
 </div>
 <input type="text" class="form-control" id="capacity" value="0" disabled="">
 <div class="input-group-btn">
 <button type="button" class="btn btn-default increase"><span class="glyphicon glyphicon-plus"></span>
 </button>
 </div>
 </div>
 </div>
 <div class="form-group">
 <div class="input-group">
 <div class="input-group-btn">
 <button type="button" class="btn btn-default decrease"><span class="glyphicon glyphicon-minus"></span>
 </button>
 </div>
 <input type="text" class="form-control" id="rooms" value="0" disabled="">
 <div class="input-group-btn">
 <button type="button" class="btn btn-default increase"><span class="glyphicon glyphicon-plus"></span>
 </button>
 </div>
 </div>
 </div>
</form>

Bootply: http://www.bootply.com/EA5a48SCdg

Answer 1

If the input group perhaps contains additional input elements this won't work. I think that you should bind the button to the input field by declaring a new attribute to the button which is connected to the input's id. Like so:

<button type="button" class="btn btn-default increase" data-bind="rooms"><span class="glyphicon glyphicon-plus"></span></button>

It now contains the input ID which this button is connected to. Now in your JavaScript try something like this:

$(".increase").click(function() {
 var input = $('#' + $(this).data('bind'));
 input.val(input.val++);
});

It will use the data-bind attribute to connect to the specific input element and increase this value by 1 (++).