How To Display Second Icon on Leaflet Map?

Question

I cannot work out how to display two separate icons with pop up data on Leaflet maps. I have written code that can display either one but not both at the same time on the same layer.

This is my code:

var map = L.map("map", { scrollWheelZoom: false }).setView(
  [3.143363, 101.712346],
  12
);
new L.Control.Zoom({ position: "bottomleft" }).addTo(map);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution:
    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  subdomains: ["a", "b", "c"],
}).addTo(map);

var myURL = jQuery('script[src$="leafmalaymap1.js"]')
  .attr("src")
  .replace("leafmalaymap1.js", "");

var myIcon = L.icon({
  iconUrl: myURL + "tower2.png",
  iconSize: [29, 24],
  iconAnchor: [9, 21],
  popupAnchor: [0, -14],
});

for (var i = 0; i < markers.length; ++i) {
  L.marker([markers[i].latitude, markers[i].longitude], { icon: myIcon })
    .bindPopup(
      'Location: <span class="mapbold">' +
        markers[i].area +
        '</span><br>Hill LRD: <span class="mapbold">' +
        markers[i].hillLrd +
        '</span><br>NE Site Name: <span class="mapbold">' +
        markers[i].neSiteName +
        '</span><br>NE Latitude: <span class="mapbold">' +
        markers[i].latitude +
        '</span><br>NE Longitude: <span class="mapbold">' +
        markers[i].longitude +
        '</span><br>NE Site Address: <span class="mapbold">' +
        markers[i].siteAddress +
        "</span><br>"
    )
    .addTo(map);
}

var myIcon = L.icon({
  iconUrl: myURL + "tower3.png",
  iconSize: [29, 24],
  iconAnchor: [9, 21],
  popupAnchor: [0, -14],
});

for (var o = 0; o < markers.length; ++o) {
  L.marker([markers[o].latitude2, markers[o].longitude2], { icon: myIcon })
    .bindPopup(
      'Bax LRD: <span class="mapbold">' +
        markers[o].feBaxLrd +
        '</span><br>Baxis Latitude: <span class="mapbold">' +
        markers[o].latitude2 +
        '</span><br>Bax Longitude: <span class="mapbold">' +
        markers[o].longitude2 +
        '</span><br>Bax FE Site Address: <span class="mapbold">' +
        markers[o].feSiteAddress +
        "</span><br>"
    )
    .addTo(map);
}

If I change the order of [markers[i] & [markers[o] both will work independently, but do not show simultaneously.

I have tried searched on Stackoverflow but no related issues cropped up. Really appreciate some guidance on what changes I need to this JS script to make this work

Answer 1

I made the mistake of defining 'myIcon' twice and resolved the issue by changing the second 'myIcon' to 'myIcone' and changed the second [markers[i] to [markers[o] and it all worked. Many thanks to IvanSanchez who pointed me in the right direction