Problem with javascript

Hello

I have a problem that I added some javascript to make the audios play one after the other as soon as we play one but it doesn’t work for the audios in the filter (even though they have the same html structure than in the audios above which work one after the other) This is my javascript code :

Do you know what could be interfering? Thank you so much for this amazing plugin!!!

<script>
document.addEventListener('DOMContentLoaded', () => {
  const audioPlayers = Array.from(document.querySelectorAll('.audio-player'));

  // Handle custom play buttons
  const toggleButtons = document.querySelectorAll('.audio-toggle-btn');
  toggleButtons.forEach((btn, index) => {
    btn.addEventListener('click', () => {
      // Pause all other audio players
      audioPlayers.forEach((a, i) => {
        if (!a.paused && i !== index) {
          a.pause();
        }
      });

      const targetAudio = audioPlayers[index];

      // Toggle play/pause
      if (targetAudio.paused) {
        targetAudio.play().catch(err => console.log('Play error:', err));
      } else {
        targetAudio.pause();
      }
    });
  });

  // Auto-play next audio on 'ended'
  audioPlayers.forEach((audio, index) => {
    audio.addEventListener('ended', () => {
      const nextIndex = index + 1;
      if (audioPlayers[nextIndex]) {
        // Pause all others before playing next
        audioPlayers.forEach(a => a.pause());

        // Delay slightly to prevent AbortError
        setTimeout(() => {
          audioPlayers[nextIndex].play().catch(e => {
            console.log('Play prevented (likely due to browser policy):', e);
          });
        }, 100);
      }
    });
  });
});
</script>

The page I need help with: [log in to see the link]