onclick handler is not working inside an html

Question

I am working on a html & css component which in its js script fetches nav menu items form the backend. The main idea here is to add the for each menu item when the request succeeds and then, when a nav menu has children, it will have an with an arrow to collapse. Here is how I do it:

fetchNavItems().then( data => {
data.navigationMenuItems.map(item => {
        const el = `<li id="list-element-${item.id}" style='display: flex; justify-content: space-between; align-items: center;'><a href="${item.link}">${item.name}</a>${item.navigationMenuItems.length > 0 ? "<img alt='expand-icon' src='/documents/20121/0/arrow_down_icon.png' height='10' width='10' style='cursor: pointer' />" : ""}</li>`;
      menu.innerHTML += el; 
      const listElement = document.getElementById(`list-element-${item.id}`); 
      if (item.navigationMenuItems.length > 0) {
            const ll = listElement.getElementsByTagName("img")[0];
            console.log(ll);
          ll.onclick = function() {console.log("clicked");};   
        } 
    }); 
});

The problem is that the function is never added to the onclick and when I used addEventListener instead, it is invoked once when the html renders and then it is never ivoked again when clicked on the img tag. Any ideas why is it not working?