How to display multiple markers at different positions on OSM5 using JavaScript

Question

I fetched longitude and latitude from DB and saved it in a 2D array. I pass the array to the JS file. I'm using JavaScript to loop the array and display the markers with their icons. Each marker has a popup window when the mouse cursor is on the icon. I have two different positions, so I should be able to display each marker at its position. Although in the popup window that appears when the mouse is over the icon the longitude and latitude that are being displayed for both markers are the same (just the second index of the array) and I am note sure if the markers are being displayed correctly.

/* open street map newest version */
var map = new ol.Map({
    target: 'map', // the div id
    layers: [
        new ol.layer.Tile({
        source: new ol.source.OSM()
        })
    ],
    view: new ol.View({ 
        center: ol.proj.fromLonLat([4.35247, 52.520008]),
        zoom: 6,
        minZoom: 3
    })
});


for(var i=0; i < arrayPos.length; i++) {
    var long = arrayPos[i][0];
    var lat = arrayPos[i][1];

    // add a marker to the map
    var layer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [
                new ol.Feature({
                    geometry: new ol.geom.Point(ol.proj.fromLonLat([long, lat]))
                })  
            ]
        })
    });
    layer.setStyle(new ol.style.Style({
        image: new ol.style.Icon({
        src: 'https://wiki.openstreetmap.org/w/images/0/0c/Hgv.png', //
        scale: 0.4 // set the size of the vehicle on the map
        })
    }));
    map.addLayer(layer);
    
    //initialize the popup
    var container = document.getElementById('popup');
    var content = document.getElementById('popup-content');

    var overlay = new ol.Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
            duration: 250
        }
    });
    map.addOverlay(overlay);
    
    //display the pop with on mouse over event
    map.on('pointermove', function (event) {
        if (map.hasFeatureAtPixel(event.pixel) === true) {
            var coordinate = event.coordinate;
            //simple text written in the popup
            content.innerHTML = '<b>My latitude is: </b>'+lat+'<br><b>My Longitude is: </b>'+long;
            overlay.setPosition(coordinate);
        }
        else {
            overlay.setPosition(undefined);
            //closer.blur();
        }
    });

}

/* Map popup */
.ol-popup {
    position: absolute;
    background-color: white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}
.ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}

Answer 1

It is caused by closure

try this code in 'pointermove' event function

var coordinate = event.coordinate;
var latLng = ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326');
//simple text written in the popup
content.innerHTML = '<b>My latitude is: </b>' + latLng[1] + '<br><b>My Longitude is: </b>' + latLng[0];