the for each function. I click the third icon in the sequence and it fires the previous two popups, if i click the second one in the sequence it will fire the second and first but not the third.

2. echo '
3. var map = new mapboxgl.Map({
4.    container: "map",
5.    style: "mapbox://styles/mapbox/streets-v9",
6.    center:[' . $longitude . ', ' . $latitude . '],
7.    zoom: 15
8. });
9. 
   
10. // add markers to map
11. geojson.features.forEach(function(marker) {
12.    // create a DOM element for the marker
13.    var el = document.createElement("div");
14.    el.className = "marker";
15.    
16. 
    
17.    
18.    
19.    el.style.width = marker.properties.iconSize[0] + "px";
20.    el.style.height = marker.properties.iconSize[1] + "px";
21.    
22.    
23.   
24.     var popupsmall = new mapboxgl.Popup({
25.     closeOnClick: false
26.     })
27.        .setLngLat(marker.geometry.coordinates)
28.        //.setHTML(\'<img src="\' + marker.properties.placeImage + \'" style="width:150px; height:100px;padding:0px;"/>\')
29.         .setHTML("<h4 style=\"color:#6eebdf;margin-top:15px;font-size:24px;\">&pound;" + marker.properties.ppw + "</h4>")
30.        .addTo(map);
31. });
32. 
    
33. 
    
34. 
    
35. geojson.features.forEach(function(marker) {
36. 
    
38. 
    
39.        $(".mapboxgl-popup").on("click", function(e) {
40. 
    
41.         var selected = $(e.target).attr("class");
42.        
43.         alert(this.id);
44. 
    
45. 
    
46.         var popup = new mapboxgl.Popup({
47.     closeOnClick: true
48.     })
49.        .setLngLat(marker.geometry.coordinates)
50.        .setHTML(\'<a href="./property.php?id=\' + marker.properties.propertyid +  \'"><img src="\' + marker.properties.placeImage + \'" style="width:190px; height:100px;padding:0px;"/></a><br><p style="font-family: Hind, sans-serif; font-size:20px;margin-top:3px; padding-left:5px; ">\' + marker.properties.address2 + \'<br><h4 style=\"color:#11EFE0;margin-top:5px;font-size:20px; font-family: Hind, sans-serif; font-weight:600;\">&pound;\' + marker.properties.ppw + \' Per week\')
51.         //.setHTML("<h4 style=\"color:#11EFE0;margin-top:5px;font-size:20px;\">&pound;" + marker.properties.ppw + "</h4>")
52.        .addTo(map);
53.        console.log(marker.properties.address2);
54.        });
55. 
    
56. 
    
58. 
    
59.         
60. 
    
61.       
62. 
    
63. map.on("click", function(e) {
64. 
    
65. var popupsmall = new mapboxgl.Popup({
66.     closeOnClick: true
67.     })
68.        .setLngLat(marker.geometry.coordinates)
69.        //.setHTML(\'<img src="\' + marker.properties.placeImage + \'" style="width:150px; height:100px;padding:0px;"/>\')
70.         .setHTML("<h4 style=\"color:#6eebdf;margin-top:15px;font-size:24px;\">&pound;" + marker.properties.ppw + "</h4>")
71.        .addTo(map);
72. 
    
73.         $(".mapboxgl-popup").on("click", function(e) {
74.         popupsmall.remove();
75.          
76.         var popup = new mapboxgl.Popup({
77.     closeOnClick: true
78.     })
79.        .setLngLat(marker.geometry.coordinates)
80.        .setHTML(\'<a href="./property.php?id=\' + marker.properties.propertyid +  \'"><img src="\' + marker.properties.placeImage + \'" style="width:190px; height:100px;padding:0px;"/></a><br><p style="font-family: Hind, sans-serif; font-size:20px;margin-top:3px; padding-left:5px; ">\' + marker.properties.address2 + \'<br><h4 style=\"color:#11EFE0;margin-top:5px;font-size:20px; font-family: Hind, sans-serif; font-weight:600;\">&pound;\' + marker.properties.ppw + \' Per week\')
81.         //.setHTML("<h4 style=\"color:#11EFE0;margin-top:5px;font-size:20px;\">&pound;" + marker.properties.ppw + "</h4>")
82.        .addTo(map);
83.        });
84. });
85. });
87.    
89. 
    
90. 
    
91. 
    
92. </script>';

Not too sure how the formatting looks here but it seems okay in my editor.

Greatly appreciated if any of you could help me.