Tengo un bucle en mi archivo twig:

 {% for item in listItem %} <h2 class="title" id="name-id"> ID {{ item.getRobotName() }}</h2> <p id="latbot" data-lat="lat">{{ item.geteLat() }}</p> <p id="lonbot" data-lon="lon">{{ item.getLon() }}</p> {% endfor %}

En mi archivo Javascript tengo:

 let h2 = document.getElementById("name-id"); h2.addEventListener("click", link); function link() { document.getElementById("name-id"); let thisLat = document.getElementById('latbot').getAttribute('data-lat'); console.log(thisLat); let thisLon = document.getElementById('lonbot').getAttribute('data-lon') console.log(thisLon); let notifyIcon = L.divIcon({ className: 'notify-icon', iconSize: [25, 25], html: '<span></span>' }); map.panTo([thisLat, thisLon]); L.marker([thisLat,thisLon], {icon: notifyIcon}).addTo(map); } linkToMarker();

Me gustaría asignar una función JS a todos los h2 que se generan con este bucle for. Cómo puedo hacer eso ?

Solo el primer elemento está conectado a la función JS pero no los demás

Gracias.