I am setting up a Dropdown List with Bootstrap, built up with a elements. Every List item has it own id and text = name. Then i want to add an eventListener to check if the item is clicked. If so, then i want to do something and write the chosen name in the Dropdownbutton. But the problem is, every time i click any of the different options, it only gives back the latest added name in the list.

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)}`);
  }
}```