Mi código lo que hace es que al dar click a un botón dentro de un div, me crea ese mismo div dentro de otro div con otros botones, esto lo hago con template. Estos nuevos div tienen unos botones de + y - que incrementan o decrementan una cantidad. Cuando intento saber a qué div pertenece el botón + o - que presioné me da un problema. Si presiono por ejemplo el botón - me detecta un click por la cantidad de divs que se crearon igual a ese, entonces si anteriormente cree 5 div y doy click al botón - del primero, cuando lanzo una alerta de prueba para saber que si reconoce el botón, me la lanza 5 veces. Esto sucede si tengo la función que detecta a que boton di click dentro de donde creo los divs que los contienen, si pongo la función fuera no me reconoce que hago click.
Asi es como lo he intentado.
Codigo HTML
<div class="divform">
<form action="" method="post" id="formordendetalle">
<template id="templatedetalle">
<div class='divdetalleorden'>
<img style='width: 110px; height: 100px; ' src='$foto' alt='' id="fotodetalle">
<span class='nameplatomostrar' id="nombredatalle">Nombre del plato</span>
<div class='cantidad'>
<span class='spancantidad'>Cantidad</span>
<button style='font-size: 14px;' type='button' class='btn btn-primary btnmenos' id='btnmenos'>-</button>
<input style='width: 40px; text-align: center;' type='text' id='spanncantidad' value='2' class='ncantidad'></input>
<button style='font-size: 14px; margin-right:30px;' type='button' class='btn btn-primary btnmas' id='btnmas'>+</button>
<button style='font-size: 14px;' class='btn btn-danger btneliminartra' id='btneliminartra' type='button'><svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='currentColor' class='bi bi-trash3' viewBox='0 0 16 16'>
<path d='M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z'/>
</svg></button>
</div>
</div>
</template>
</form>
</div>
Codigo JavaScript
//agregar consumible a detalle orden
const btns = document.querySelectorAll('#btnagrdetalle');
btns.forEach((btn) => {
btn.addEventListener('click', e => {
let btne = e.target;
let div = btne.closest('.divplato');
let nombre = div.querySelector('#nombre').innerText;
let foto = div.querySelector('#foto');
let srcfoto = foto.src;
if(document.getElementById(nombre)){
alert("Este plato ya fue agregado a la lista, si desea agregar mas, cambie la cantidad.");
}
else{
//obtiene template
let template = templatedetalle.content.cloneNode(true);
let nombredetalle = template.querySelector('#nombredatalle');
let fotodetalle = template.querySelector('#fotodetalle');
let divdeta = template.querySelector('.divdetalleorden');
nombredetalle.innerHTML = nombre;
fotodetalle.src = srcfoto;
divdeta.setAttribute("id", nombre);
formordendetalle.appendChild(template);
}
if(document.getElementsByClassName('.divdetalleorden')){
const cantmenos =document.querySelectorAll('#btnmenos');
cantmenos.forEach((cnmenos) => {
cnmenos.addEventListener('click', e => {
alert('Hola');
});
});
}
});
});