Problem binding a Popup to a specific Marker in an array of Markers

[designcomputer]

Checklist

• I've looked at the documentation to make sure the behavior isn't documented and expected.
• I'm sure this is an issue with Leaflet, not with my app or other dependencies (Angular, Cordova, React, etc.).
• I've searched through the current issues to make sure this hasn't been reported yet.
• I agree to follow the Code of Conduct that this project adheres to.

Steps to reproduce

Please see the example code via the URL listed below.

When hovering over a Marker the Popup will appear over the last marker in the array or the last Marker clicked on.

Expected behavior

I have some existing code that uses an array of Markers with seven elements 0-6. If I bindPopup to one of the elements (see code below) using leafletjs 1.7.1 everything works as expected with each Popup appearing a the location of the individual marker.

markers[0].bindPopup( '<p>Hello 0</p>').openPopup();
or
markers[4].bindPopup( '<p>Hello 4</p>').openPopup();

Current behavior

When I do the same thing when using 1.8.0 the Popups always appear at the last marker, Markers[6], location or at the last marker, I click on.

An example using 1.8.0 can be seen here: https://test.designcomputer.com/leaflet/

Environment

• Leaflet version: 1.8.0
• Browser (with version): Chrome Version 102.0.5005.63 (Official Build) (64-bit)
• OS/Platform (with version): Window 10 Pro 1903

[raychanks]

Hi there, I would like to look into this issue.

[jonkoops]

Sure @raychanks, go for it.