Leaflet Marker Cluster - click button in table to open popup inside cluster spiderfy

Question

i will click button in table to open popup inside cluster spiderfy, but it not open the popup but if not cluster spiderfy disable popup is work

var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    maxZoom: 19,
                    attribution: 'Powered by Geoapify | © OpenMapTiles &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                }),
                latlng = L.latLng(<?= $center['lat'].','.$center['lng'] ?>);

            var map = L.map('maps-leaflets', {
                center: latlng,
                zoom: 5,
                layers: [tiles],
                fullscreenControl: true,
                fullscreenControlOptions: { // optional
                    title: "Show me the fullscreen !",
                    titleCancel: "Exit fullscreen mode"
                }
            });
            const _markersDays = [];
            var _tracksDays = L.polyline(tracks, { color: '#ff6d6d' }).addTo(map);
            var _coordsDays = L.polyline(coords, { color: '#329cf2' }).addTo(map);

            var markers = L.markerClusterGroup({
                spiderfyOnMaxZoom: true, // Enable spiderfy on max zoom
                showCoverageOnHover: true, // Show cluster coverage on hover
                maxClusterRadius: 5, // Set the maximum radius of a cluster in pixels
                // disableClusteringAtZoom: 19, // Disable clustering at a certain zoom level
            });
            markers.on('clusterclick', function (a) {
                a.layer.zoomToBounds();
            });
            var bounds = new L.LatLngBounds();

                var markerData = <?= $leftlet_marker ?>;
                // Add markers to the cluster group
                markerData.forEach(function (marker) {
                    var individualMarker = L.marker([marker.lat, marker.lng], {
                        id: marker.id,
                        title: marker.title,
                        icon: L.divIcon({
                            className: 'custom-icon',
                            iconSize: [24, 41],    // Width and height of the icon
                            iconAnchor: [18, 41],  // Anchor point of the icon (relative to the center)
                            popupAnchor: [1,-34],  // Popup anchor point (relative to the icon)
                            html: marker.icon
                        }),
                    }).bindPopup(marker.popup);
                    markers.addLayer(individualMarker);
                    //   add marker into array
                    _markersDays.push(individualMarker); 
                    bounds.extend(individualMarker.getLatLng());
                });
                bounds['_northEast']['lat'] = bounds['_northEast']['lat'] + 0.2;
                bounds['_southWest']['lat'] = bounds['_southWest']['lat'] - 0.2;
                map.fitBounds(bounds);
            map.addLayer(markers);

            // Attach a click event to the button
            $('.btn-show').on('click', function (e) {
                focusOnMarkerById($(this).attr('data'));
            });
            
            // Function to focus on a marker by its ID
            function focusOnMarkerById(markerId) {
                markers.eachLayer(function (layer) {
                    if (layer.options.id === markerId) {
                        // Trigger a click event on the marker
                        layer.fire('click');
                        map.setView(layer.getLatLng(), 22);
                        layer.openPopup();
                    }
                });
            }

Can someone help me? Thank you imageproblems

I've tried several times from the gpt chat and asked friends but haven't found the right answer. I hope here I can get it.