Estoy configurando una lista desplegable con Bootstrap, construida con elementos. Cada elemento de la lista tiene su propia identificación y texto = nombre. Luego quiero agregar un eventListener para verificar si se hace clic en el elemento. Si es así, quiero hacer algo y escribir el nombre elegido en el botón desplegable. Pero el problema es que cada vez que hago clic en cualquiera de las diferentes opciones, solo devuelve el último nombre agregado en la lista.

 async function setOnLoad() { retrieveCoordinate(); const query = new Parse.Query("User"); try { const results = await query.find(); var json = JSON.parse(JSON.stringify(results)); for (let i = 0; i < json.length; i++) { let append = document.createElement("li"); let name = json[i].username + "" + json[i].LastName; append.innerHTML = "<a class='dropdown-item' id='" + name + "' href='#'>" + name + "</a>"; dropdownmenu.append(append); var element = document.getElementById(name); element.addEventListener("click", function(){ console.log(element.id); dropdownMenuButton1.innerHTML = element.id; }); } } catch (error) { console.log(`Error: ${JSON.stringify(error)}`); } }```