<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="countItem"> <span class="btn-minus"><span class="glyphicon glyphicon-minus"></span></span> <input value="1" class="count"> <span class="btn-plus"><span class="glyphicon glyphicon-plus"></span></span> </div><!--countItem-->

/*start plus-minus*/ .btn-minus{ cursor:pointer; padding:6px 7px; border:1px solid #c6c6c6; border-radius:50%; margin-right: 5px; font-size: 12px; color: #333333; } .btn-plus{ cursor:pointer; padding:6px 7px; border:1px solid #c6c6c6; border-radius:50%; margin-left: 5px; font-size: 12px; color: #333333; } .count{ font-size: 16px; width: 40px; text-align: center; } /*end plus-minus*/

$(document).ready(function(){ $(".btn-minus").on("click",function(){ var now = $(".countItem input").val(); if ($.isNumeric(now)){ if (parseInt(now) -1> 0) { now--;} $(".countItem input").val(now); } }) $(".btn-plus").on("click",function(){ var now = $(".countItem input").val(); if ($.isNumeric(now)){ $(".countItem input").val(parseInt(now)+1); } }) })