I am trying to make a drop down list that dynamically adds elements from an API. When the user selects an item in the dropdown, it should add a class called "current" to that item. Only one dropdown item in the list can have the class 'current' applied to it.

I have successfully create the HTML elements (listItem) and appended them to the list. However, when I try to add event listener, the event registers with the child elements img and div with text such that when user clicks those, the class 'current' is applied there and not the parent node.

I read up on "event bubbling" but not sure if this is my issue or not.

document.addEventListener('DOMContentLoaded', async () => {
  const dropDownToggle = document.querySelector('.w-dropdown-toggle')
  const dropDownList = document.querySelector('.w-dropdown-list')
  const countries = await getCountries();

  countries.forEach((country) => {
    const countryName = country.name.common;
    const cca2 = country.cca2;
    const svgUrl = country.flags.svg;
    let prefix = country.idd.root + country.idd.suffixes?.[0]
    prefix = Number.isNaN(prefix) ? prefix="" : prefix
    //console.log(countryName, cca2, prefix)

    const listItem = createListItem(countryName, cca2, svgUrl, prefix);

    // Bad code here: <a> tag gets event listener but so do its children
    listItem.addEventListener("click", (event) => {
      console.log(event);
      //console.log(event);
      //document.querySelector('current')?.classList.remove('current');
      //document.querySelector('current').ariaSelected = false;
      console.log('hello')
      event.target.classList.add("current");
      event.target.ariaSelected = true;
      console.log('goodbye')
    });

    dropDownList.append(listItem);
  })
});

const getCountries = async () => {
  let url = 'https://restcountries.com/v3.1/all'
  const response = await fetch(url)
  const data = await response.json();
  return data;
}

const createListItem = (countryName, cca2, svgUrl, prefix) => {
  const template = `
    <a data-element="item" aria-role="option" aria-selected="false" href="#" class="dropdown_item w-inline-block" tabindex="0"><img src="${svgUrl}" loading="lazy" data-element="flag" alt="" class="dropdown_flag"><div data-element="value" class="dropdown_text">${cca2}</div></a>
  `
  const listItem = document.createElement("template");
  listItem.innerHTML = template.trim();
  return listItem.content.firstElementChild
}