Leaflet: How can I highlight only the polygon which lays behind a marker on mouseover this marker?

Question

With looping on php I generate some polygons and markers. Now I want to highlight exactly the one polygon with is laying behind the mouseovered marker. But The following code highlight always the same polygon. No matter which marker is mouseovered, it highlight always the same polygon. I think the problem is that it takes always the last polygon of the loop. How can I make it, that the mouseovered marker highlight the polygon behind it? Thanks so much in advance..

 <?PHP  
       for ($i=0;$i<=count($station);$i++) {  
 ?>
        var polygon = new L.Polygon(line, {
            color: pastel,
            weight: 0.4,
            opacity: 0.1,
            fillColor: pastel,
            fillOpacity: 0.05,    
            interactive: true   
        });
        polygon.addTo(map);
        
        var myIcon = L.divIcon({
            className: 'divIcon',
            iconSize: new L.Point(35, 15),
            iconAnchor:[18, 20],
            zIndexOffset: 1000,
            html: '<?=$desc1[$i]?>'
        });
        var marker = L.marker([x1, y1], {icon: myIcon})
        .addTo(map)
        .bindTooltip('<?=$desc[$i]?>');
        
        marker.on('mouseover', function() { 
            polygon.setStyle({
                fillOpacity: 0.5  
            });
        });
        marker.on('mouseout', function() {
            polygon.setStyle({
                fillOpacity: 0.05
            });
        });
    
    <?PHP
    }
    ?> 

Answer 1

Reference the polygon on the marker like that:

var polygon = new L.Polygon(line, {
            color: pastel,
            weight: 0.4,
            opacity: 0.1,
            fillColor: pastel,
            fillOpacity: 0.05,    
            interactive: true   
        });
        polygon.addTo(map);
        
        var myIcon = L.divIcon({
            className: 'divIcon',
            iconSize: new L.Point(35, 15),
            iconAnchor:[18, 20],
            zIndexOffset: 1000,
            html: '<?=$desc1[$i]?>'
        });
        var marker = L.marker([x1, y1], {icon: myIcon})
        .addTo(map)
        .bindTooltip('<?=$desc[$i]?>');
        
        marker.refPoly = polygon;
        marker.on('mouseover', function(e) { 
            e.target.refPoly.setStyle({
                fillOpacity: 0.5  
            });
        });
        marker.on('mouseout', function(e) {
            e.target.refPoly.setStyle({
                fillOpacity: 0.05
            });
        });