Dynamically updating markers in leaflet markercluster

Question

I have 1000+ markers which Im trying to update dynamically on a leaflet js map with markercluster. I am using custom marker icons with custom text that is the live pricing for different locations.

I have everything working fine but when adding in the markercluster the markers can no long be updated using getElementByID, here is my code.

Its throwing a null is not an object error in the getElementByID which indicates that the element has not been created.

Any way to fix this in a markercluster?

    var markers = L.markerClusterGroup({
                            chunkedLoading: true,
                                spiderfyOnMaxZoom: false,
                                showCoverageOnHover: false,
                                zoomToBoundsOnClick: false
                            });
                    
            //Loop and place markers for each station and lastest prices
            for(let i = 0; i < locations.length; i++) { 
                    
           const position = prices.findIndex(object => {
                return object.station_id ===    locations[i].station_id;
                                                });

          let myIcon = L.divIcon({className: 'my-div-icon', html: '<div class="myIcon" id="myIcon' + i +'"></div>'});

        var markerObject = new L.marker([locations[i].lat, locations[i].lng], {icon: myIcon, id: i})
                        .bindPopup('  ' + locations[i].title + '<p></p>' + 'Updated ' + dayjs(prices[position].addeddate).fromNow() + '<p></p>' + '<button type="button" onclick="openForm()" id="btn">Update Price</button>')
                                           // .addTo(map)
                                            .on('click', onClick);

document.getElementById("myIcon" + i).innerHTML = '\u20AC' + prices[position].unleaded_price + ' ' + '\u20AC' + prices[position].diesel_price;
                                            
                                           //markerObjects.push(markerObject);
                                          markers.addLayer(markerObject);
                                          
                    }

                map.addLayer(markers);

Answer 1

You need to add the marker(s) to the map before you can access the myIcon element (so that it is created).