<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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-xs-3 text-center"><img src="http://masterskaya-pamyat.ru/images/goods/fk/10m.jpg"></div> <div class="col-xs-9"> <select name="option[127]" id="input-option127" onchange="fiofunc($(this),'portret', true)" class="form-control"> <option data-price="" value="">Выберите керамику</option> <option master-option-value="63" option-value="29" value="625|1" data-fprice="" data-price="1 200р." data-id="625">Россия 9*12 овал (+1 200р.) </option> <option master-option-value="63" option-value="30" value="626|1" data-fprice="" data-price="1 500р." data-id="626">Россия 13*18 овал (+1 500р.) </option> <option master-option-value="63" option-value="31" value="627|1" data-fprice="" data-price="3 500р." data-id="627">Россия 18*24 овал (+3 500р.) </option> <option master-option-value="63" option-value="32" value="628|1" data-fprice="" data-price="2 100р." data-id="628">Италия 9*12 овал (+2 100р.) </option> <option master-option-value="63" option-value="33" value="629|1" data-fprice="" data-price="2 500р." data-id="629">Италия 13*18 овал (+2 500р.) </option> <option master-option-value="63" option-value="34" value="630|1" data-fprice="" data-price="7 000р." data-id="630">Италия 18*24 овал (+7 000р.) </option> </select> <div class="input-qty"> <b>Выберите количество</b> <div class="input-group number-spinner"> <span class="input-group-btn"> <button class="btn btn-default" data-dir="dwn"><span class="glyphicon glyphicon-minus"></span></button> </span> <input type="text" class="form-control text-center" value="1"> <span class="input-group-btn"> <button class="btn btn-default" data-dir="up"><span class="glyphicon glyphicon-plus"></span></button> </span> </div> </div> </div> </div> </div>

/* just for preview */ .container { padding-top: 40px; } .input-qty{ margin-top:5%; }

$(document).on('click', '.number-spinner button', function () { var btn = $(this), oldValue = btn.closest('.number-spinner').find('input').val().trim(), newVal = 0; if (btn.attr('data-dir') == 'up') { newVal = parseInt(oldValue) + 1; } else { if (oldValue > 1) { newVal = parseInt(oldValue) - 1; } else { newVal = 1; } } btn.closest('.number-spinner').find('input').val(newVal); });