如何将JS函数分配给使用循环生成的标签列表？

Question

我的树枝文件中有一个循环：

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

在我的JavaScript文件中，

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

我想为所有使用此循环生成的H2分配JS函数。我该怎么做？

只有第一个项目连接到JS功能，但其他项目不

感激您。