<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous"> <div class="container mt-5"> <div class="row"> <div class="col-sm-4 "> <div class="input-group mb-3 snipper"> <div class="input-group-prepend"> <button class="btn btn-dark btn-sm minus-btn"><i class="fa fa-minus"></i></button> </div> <input type="number" class="form-control form-control-sm qty_input" value="1" min="1"> <div class="input-group-prepend"> <button class="btn btn-dark btn-sm plus-btn"><i class="fa fa-plus"></i></button> </div> </div> </div> <div class="col-sm-4 "> <div class="input-group mb-3 snipper"> <div class="input-group-prepend"> <button class="btn btn-dark btn-sm minus-btn"><i class="fa fa-minus"></i></button> </div> <input type="number" class="form-control form-control-sm qty_input" value="1" min="1"> <div class="input-group-prepend"> <button class="btn btn-dark btn-sm plus-btn"><i class="fa fa-plus"></i></button> </div> </div> </div> </div> </div>

input { text-align: center; }

$(document).ready(function(){ $('.qty_input').prop('disabled', true); $(this).find('.plus-btn').click(function(){ $(this).find('.qty_input').val(parseInt($('.qty_input').val()) + 1 ); }); $(this).find('.minus-btn').click(function(){ $('.qty_input').val(parseInt($('.qty_input').val()) - 1 ); if ($('.qty_input').val() == 0) { $('.qty_input').val(1); } }); });