I have one button that shows all my products in the webpage, each product is loaded from an array and inserted with innerHTML, each product is inserted with one button, i tried to assing one function for those buttons, but nothing happens:
Show.addEventListener('click', () => {
flag = flag + 1
if (flag == 2) {
document.getElementById('ItemsID').disabled = true
}
console.log(ItemsID.options[ItemsID.selectedIndex].value)
if (ItemsID.options[ItemsID.selectedIndex].value == "Vuelos") {
document.getElementById('ShowItems').disabled = true
VUELOSPROMOCIONES.forEach((VUELOSPROMOCIONES, indice) => {
div_Vuelos.innerHTML += `
<div class="card" id="persona${indice + 1}" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Vuelo Promocional ${indice + 1}</h5>
<p>Origen: ${VUELOSPROMOCIONES.origen}</p>
<p>Destino: ${VUELOSPROMOCIONES.destino}</p>
<p>Fecha Ida: ${VUELOSPROMOCIONES.FechaIda}</p>
<p>Fecha Vuelta: ${VUELOSPROMOCIONES.FechaVuelta}</p>
<p>Precio: ${VUELOSPROMOCIONES.precio}</p>
</div>
</div>
**<button id="Enviar">Click me</button>**
`
})
} else if (ItemsID.options[ItemsID.selectedIndex].value == "Autos") {
PROMOCIONESAUTOS.forEach((PROMOCIONESAUTOS, indice) => {
document.getElementById('ShowItems').disabled = true
div_Autos.innerHTML += `
<div class="card" id="Autos Disponibles ${indice + 1}" style="width: 18rem;">
<div class="card-title">Persona ${indice + 1}</h5>
<p>Modelo: ${PROMOCIONESAUTOS.modelo}</p>
<p>Marca: ${PROMOCIONESAUTOS.marca}</p>
<p>Color: ${PROMOCIONESAUTOS.color}</p>
</div>
</div>
<button id="Enviar">Click me</button>
`
})
}
})
if i insert the same button in the html, it works with the same id