<html>
<head>
<meta charset="windows-1251" />
<style>
.wr {
margin: 50px;
position: relative;
border: 2px solid #06c106;
padding: 5px 10px;
width: 130px;
overflow: hidden;
}
.wr input {
display: block;
padding: 8px;
width: 50px;
text-align: center;
border: 2px solid #c00;
outline: none;
float: left;
}
#bminus,
#bplus {
float: left;
display: block;
font-size: 26px;
padding: 5px 8px;
font-weight: bolder;
cursor: pointer;
color: #d00;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div class="wr">
<div>
<span id="bminus">–</span><input type="text" id="count" value="1 шт" /><span id="bplus">+</span>
<span id="bminus">–</span><input type="text" id="count" value="1 шт" /><span id="bplus">+</span>
<span id="bminus">–</span><input type="text" id="count" value="1 шт" /><span id="bplus">+</span>
<span id="bminus">–</span><input type="text" id="count" value="1 шт" /><span id="bplus">+</span>
</div>
</div>
<script>
get=function(s){return document.querySelector(".wr").querySelectorAll(s)}
minuses=get("#bminus")
pluses=get("#bplus")
inputs=get("#count")
setMinus=function(el){return function(){
var iv=el.value; el.value=parseInt(iv)==0? iv : iv.replace(/\d+/, function(n){return +n-1})
}}
setPlus=function(el){return function(){
el.value=el.value.replace(/\d+/, function(n){return +n+1})
}}
for(var i=0; i<minuses.length; i++){
minuses[i].onclick=setMinus(inputs[i])
pluses[i].onclick=setPlus(inputs[i])
}
</script>
</body>
</html>