<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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="container"> <div class="row"> <div class="col-md-6 offset-md-3"> <div class="input-group" id="spinner"> <span class="input-group-btn btn-group-sm"> <button type="button" class="btn btn-danger" data-action="decrement"><span class="fa fa-minus"></span></button> </span> <input name="qty" type="text" class="form-control text-center" value="1" min="1" max="10" disabled> <span class="input-group-btn btn-group-sm"> <button type="button" class="btn btn-success" data-action="increment"><span class="fa fa-plus"></span></button> </span> </div> </div> </div> </div>

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); .container { padding-top: 40px; }

jQuery(document).ready(function(){ $('#spinner button').on('click', function(){ let input = $(this).closest('#spinner').find('input[name=qty]'); if($(this).data('action') === 'increment') { if(input.attr('max') === undefined || parseInt(input.val()) < parseInt(input.attr('max'))) { input.val(parseInt(input.val(), 10) + 1); } } else if($(this).data('action') === 'decrement') { if(input.attr('min') === undefined || parseInt(input.val()) > parseInt(input.attr('min'))) { input.val(parseInt(input.val(), 10) - 1); } } }); });