Tengo el siguiente campo para disminuir o aumentar la cantidad del mismo.
<span class="input-group-btn">
<button class="btn btn-default" id="menos" type="button">-</button>
</span>
<input type="text" id="contador" value="1" min="1"/>
<span class="input-group-btn">
<button class="btn btn-default" id="mas" type="button">+</button>
</span>
JS
var sumar = document.getElementById("mas");
var restar = document.getElementById("menos");
var contador = document.getElementById("contador");
sumar.onclick = function() {
contador.value = Number(contador.value) + 1;
};
restar.onclick = function() {
contador.value = Number(contador.value) - 1;
};
Así funciona si solo tuviera ese campo, pero como voy a agregarlos dinámicamente, la idea es que funcione para la cantidad de campos que haya.
Es decir si tuviera por ejemplo 3
<span class="input-group-btn">
<button class="btn btn-default" id="menos" type="button">-</button>
</span>
<input type="text" id="contador" value="1" min="1"/>
<span class="input-group-btn">
<button class="btn btn-default" id="mas" type="button">+</button>
</span>
<!------!>
<span class="input-group-btn">
<button class="btn btn-default" id="menos" type="button">-</button>
</span>
<input type="text" id="contador" value="1" min="1"/>
<span class="input-group-btn">
<button class="btn btn-default" id="mas" type="button">+</button>
</span>
<!------!>
<span class="input-group-btn">
<button class="btn btn-default" id="menos" type="button">-</button>
</span>
<input type="text" id="contador" value="1" min="1"/>
<span class="input-group-btn">
<button class="btn btn-default" id="mas" type="button">+</button>
</span>
Pero de esos 3 solo me funciona 1.