ayuda, tengo un problema, y creo que se trata de sobreescritura de una variable, los pongo en contexto
tengo una funcion que pide datos a php, cuando carga estos datos me lanza un select , y yo puedo obtener el valor de ese select, pero el problea es: el select es dinamico, ya que la funcion se va a llamar varias vesces (con un for)
entonces, cuando quiero obtener el 'value' del select, solo me esta tomando el valor del ultimo select
aqui dejo la funcion en js
const mostrarProductos = (contador, id_proveedor) => {
// muestra un loadre en la pantalla
loader();
// funcion para pedir los datos a php, esta funcion es asincrona
pedirDatosProducto(id_proveedor)
.then(data => {
// si no se encontraron datos
if (data.length <= 0) return;
// Mostrar el <select> de los productos en el formulario con un id unico para cada select
contenedorDetallesProductos.innerHTML += `
<hr />
<!-- DESCRIPCION -->
<div class="flex flex-col gap-2 mt-10">
<label for="descripcion${contador}">Descripción</label>
<select name="descripcion${contador}" id="descripcion${contador}" class="p-2">
<option value="" selected>Seleccionar</option>
${data.map(e => {
return (`<option value="${e.id_producto}">${e.nombre_producto}</option>`)
})}
</select>
</div>
<!-- aqui va unos imputs (esto aparecera cuando el input 'descripcion' cambie) -->
<div class="w-full grid grid-cols-2 gap-x-3 gap-y-5 " id="contendorDatosProducto"></div>
`;
// Obtener referencia al select actual
let descripcionSelect = document.getElementById(`descripcion${contador}`);
// TODO: aqui esta el error, yo pienso que se esta sobreescribiendo la variable (descripcionSelect) y por eso solo me funciona el select que se ve en la pantalla
// Cada vez que el <select> del producto cambie
descripcionSelect.addEventListener('change', function(e) {
let id_producto = e.target.value;
console.log(id_producto);
});
})
.finally(() => {
// cerramos el loader
cerrarLoader();
});
};
parece mucho, pero en realidad se ve grande por el html que lleva dentro
ahora, en la parte de
let descripcionSelect = document.getElementById(`descripcion${contador}`);
yo siento que se esta sobreescribiendo y por eso solo me toma el valor del ultimo select
no se si hay alguna forma de resolver este problema, adjunto foto de lo que estoy haciendo: