It's actually inefficient to call aumentarUno and disminuirUno passing it the name of form . What you should do is pass the reference of the element that called it:
<a onclick="aumentarUno(this)"><i class="fas fa-angle-up"></i></a>
The function receives the a element and can infer what form it is by asking the parentNode of the element. Knowing the parentNode, you proceed in the way you already had implemented.
This way you save yourself having to give a unique name to each form and modify the code of each of the links. Only copies and sticks to infinity.
function aumentarUno(element)
{
var form = element.parentNode;
if(form.numero.value < 10){
form.numero.value ++;
}else{
alert("La cantidad maxima de productos a comprar es 10");
}
}
function disminuirUno(element)
{
var form = element.parentNode;
if(form.numero.value > 0){
form.numero.value--;
}else{
alert("Su carrito ya está en cero");
}
}
form {
margin-bottom: 3px;
}
form span {
display:inline-block;
width:100px;
}
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
crossorigin="anonymous">
<div class="cantidadProducto">
<p>Cantidad</p>
<form name="formCantidad">
<span>Pan</span>
<a onclick="aumentarUno(this)"><i class="fas fa-angle-up"></i></a>
<input type="text" name="numero" class="numeroCantidadProducto" value="1" ReadOnly>
<a onclick="disminuirUno(this)"><i class="fas fa-angle-down"></i></a>
</form>
<form name="formCantidad">
<span>Leche</span>
<a onclick="aumentarUno(this)"><i class="fas fa-angle-up"></i></a>
<input type="text" name="numero" class="numeroCantidadProducto" value="1" ReadOnly>
<a onclick="disminuirUno(this)"><i class="fas fa-angle-down"></i></a>
</form>
<form name="formCantidad">
<span>Huevos</span>
<a onclick="aumentarUno(this)"><i class="fas fa-angle-up"></i></a>
<input type="text" name="numero" class="numeroCantidadProducto" value="1" ReadOnly>
<a onclick="disminuirUno(this)"><i class="fas fa-angle-down"></i></a>
</form>
<form name="formCantidad">
<span>Harina</span>
<a onclick="aumentarUno(this)"><i class="fas fa-angle-up"></i></a>
<input type="text" name="numero" class="numeroCantidadProducto" value="1" ReadOnly>
<a onclick="disminuirUno(this)"><i class="fas fa-angle-down"></i></a>
</form>
</div>
Now, it is a bit impractical to have a form for each product. I imagine that when you want to persist the purchase you will want to send an object that represents each product and its respective quantity. This can be done with a little metaprogramming: you only draw the form (one only) and declare an array of products:
var productos=['pan','leche','huevos','harina'];
And for each of them, you dynamically create a fieldset that you add to the form. Within each field there is an input whose name is the product. That way when you submit the form you have N tuplas product-value:
var productos = ['pan', 'leche', 'huevos', 'harina'];
function aumentarUno(event) {
var element = event.target,
fieldset = element.parentNode,
numero = fieldset.querySelector('.numeroCantidadProducto');
if (numero.value < 10) {
numero.value++;
} else {
alert("La cantidad maxima de productos a comprar es 10");
}
}
function disminuirUno(event) {
var element = event.target,
fieldset = element.parentNode,
numero = fieldset.querySelector('.numeroCantidadProducto');
if (numero.value > 0) {
numero.value--;
} else {
alert("Su carrito ya está en cero");
}
}
function addFieldSet(producto) {
var fieldset = document.createElement('fieldset'),
span = document.createElement('span'),
aumentar = document.createElement('a'),
cantidad = document.createElement('input'),
disminuir = document.createElement('a');
span.innerText = producto;
aumentar.onclick = aumentarUno;
disminuir.onclick = disminuirUno;
aumentar.className = 'fas fa-angle-up';
disminuir.className = 'fas fa-angle-down';
cantidad.type = "text";
cantidad.name = producto;
cantidad.className = 'numeroCantidadProducto';
cantidad.value = 1;
cantidad.readOnly = 'readonly';
fieldset.appendChild(span);
fieldset.appendChild(aumentar);
fieldset.appendChild(cantidad);
fieldset.appendChild(disminuir);
document.getElementById('formCantidad').appendChild(fieldset);
}
function enviarCarrito() {
document.getElementById('formCantidad').querySelectorAll('.numeroCantidadProducto').forEach(function (input) {
console.log(input.name, input.value);
});
}
productos.forEach(function (producto) {
addFieldSet(producto);
});
form {
margin-bottom: 3px;
}
form span {
display:inline-block;
width:100px;
}
.cantidad {
width:150px;
float:left;
display:inline-block;
}
fieldset {
clear:both;
border: 0 none;
}
.numeroCantidadProducto {
margin: 0 10px;
}
.enviar {
float: left;
margin-bottom:10px;
}
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
crossorigin="anonymous">
<form name="formCantidad" id="formCantidad" class="cantidadProducto">
<span class="cantidad">Cantidad</span>
<input type="button" onclick="enviarCarrito()" class="enviar" value="enviar">
</form>