Select the correct input when using input group after pressing a button 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 &lt; 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 &gt; 0) {
    $(this).parents('.input-group').children('input').val(amount - 1);
  }
});
&lt;form class="form-inline"&gt;
  &lt;div class="form-group"&gt;
    &lt;div class="input-group"&gt;
      &lt;div class="input-group-btn"&gt;
        &lt;button type="button" class="btn btn-default decrease"&gt;&lt;span class="glyphicon glyphicon-minus"&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;input type="text" class="form-control" id="capacity" value="0" disabled=""&gt;
      &lt;div class="input-group-btn"&gt;
        &lt;button type="button" class="btn btn-default increase"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="form-group"&gt;
    &lt;div class="input-group"&gt;
      &lt;div class="input-group-btn"&gt;
        &lt;button type="button" class="btn btn-default decrease"&gt;&lt;span class="glyphicon glyphicon-minus"&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;input type="text" class="form-control" id="rooms" value="0" disabled=""&gt;
      &lt;div class="input-group-btn"&gt;
        &lt;button type="button" class="btn btn-default increase"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;




Bootply: http://www.bootply.com/EA5a48SCdg
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:

&lt;button type="button" class="btn btn-default increase" data-bind="rooms"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;&lt;/button&gt;


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 (++).