<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="col-lg-2"> <div class="input-group"> <span class="input-group-btn"><button class="btn btn-default value-control" data-action="minus" data-target="font-size"><span class="glyphicon glyphicon-minus"></span></button></span> <input type="text" value="1" class="form-control" id="font-size"> <span class="input-group-btn"><button class="btn btn-default value-control" data-action="plus" data-target="font-size"><span class="glyphicon glyphicon-plus"></span></button></span> </div> </div>

$(document).on('click','.value-control',function(){ var action = $(this).attr('data-action') var target = $(this).attr('data-target') var value = parseFloat($('[id="'+target+'"]').val()); if ( action == "plus" ) { value++; } if ( action == "minus" ) { value--; } $('[id="'+target+'"]').val(value) })