Buttons inside multiple leaflet popups are not triggered on click

[Tamara]

Hello,

My leaflet map cointains multiple markers with popups. Each popup has an img element that can be clicked. In the maps that contain only one marker the code works correctly. However, when the map contains multiple markers, the clicks are detected when we click on another map. 

Example demonstration:

1). Map A contains only one marker, map B contains 7 markers.

2). The click on the img element in the popup on map A is detected.

3). The clicks on multiple (for example 6) img elements in the popups on map B are NOT detected.

4). The click on the img element in popup on map A is detected, as well as the previous 6 from map B.

The code is shown bellow:

onEachFeature: function (feature, layer) {
    centerLink+=feature.geometry.coordinates[1]+', '+feature.geometry.coordinates[0]+'/';
    if ((typeof onFeatureClick == 'function') && feature.enableAction && feature.id) {
    layer.on(
          'click', function (e) {
                   onFeatureClick([{name: "featureId", value: feature.id}]);
            })
       }

     if (feature.title) {
             var content ='<img id="image" class="img"/>';
             layer.bindPopup(feature.title+content).on('popupopen', function () {
                  document.getElementById("image").addEventListener('click', (e) => {
                         alert('clicked');
                   });
             });

             layer.on(
                   'mouseover', function (e) {
                          this.openPopup();
                     });   
                }
         }
});

Example of the map with one marker is shown in the image.