I have a loop in my twig file :

{% 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 %}

In my Javascript file I have:

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();

I would like to assign a JS function to all the h2 that are generate with this for loop. How can I do that ?

Only the first item is connected to the JS function but not the others

Thank you.