<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row"> <div class="col-sm-3"></div> <div class="col-sm-2"> <label>First</label> <!-- purely semantic --> <div class="form-control input-sm center merge-bottom-input" name="first">0</div> <div class="btn-group btn-block" role="group" aria-label="plus-minus"> <button type="button" class="btn btn-sm btn-danger minus-button merge-top-left-button" disabled="disabled"><span class="glyphicon glyphicon-minus"></span></button> <button type="button" class="btn btn-sm btn-success plus-button merge-top-right-button"><span class="glyphicon glyphicon-plus"></span></button> </div><!-- end button group --> </div> <!-- end column --> <div class="col-sm-2"> <label>Second</label> <div class="form-control input-sm center merge-bottom-input" name="second">0</div> <div class="btn-group btn-block" role="group" aria-label="plus-minus"> <button type="button" class="btn btn-sm btn-danger minus-button merge-top-left-button" disabled="disabled"><span class="glyphicon glyphicon-minus"></span></button> <button type="button" class="btn btn-sm btn-success plus-button merge-top-right-button"><span class="glyphicon glyphicon-plus"></span></button> </div><!-- end button group --> </div> <!-- end column --> <div class="col-sm-2"> <label>Third</label> <div class="form-control input-sm center merge-bottom-input" name="third">0</div> <div class="btn-group btn-block" role="group" aria-label="plus-minus"> <button type="button" class="btn btn-sm btn-danger minus-button merge-top-left-button" disabled="disabled"><span class="glyphicon glyphicon-minus"></span></button> <button type="button" class="btn btn-sm btn-success plus-button merge-top-right-button"><span class="glyphicon glyphicon-plus"></span></button> </div><!-- end button group --> </div> <!-- end column --> <div class="col-sm-3"></div> </div><!-- end row -->

.center { text-align: center; } .merge-bottom-input { width: 67px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .merge-top-left-button { border-top-left-radius: 0; } .merge-top-right-button { border-top-right-radius: 0; }

$(document).ready( () => { $('.minus-button').click( (e) => { // change this to whatever minimum you'd like const minValue = 0 const currentInput = $(e.currentTarget).parent().prev()[0]; let minusInputValue = $(currentInput).html(); if (minusInputValue > minValue) { minusInputValue --; $($(e.currentTarget).next()).removeAttr('disabled'); $(currentInput).html(minusInputValue); if (minusInputValue <= minValue) { $(e.currentTarget).attr('disabled', 'disabled'); } } }); $('.plus-button').click( (e) => { const maxValue = 10 const currentInput = $(e.currentTarget).parent().prev()[0]; let plusInputValue = $(currentInput).html(); if (plusInputValue < maxValue) { plusInputValue ++; $($(e.currentTarget).prev()[0]).removeAttr('disabled'); $(currentInput).html(plusInputValue); if (plusInputValue >= maxValue) { $(e.currentTarget).attr('disabled', 'disabled'); } } }); });