Event Listnner does’nt work from the first click

I’m building a music app, I’m trying to use an event listner that when I click on each song the song plays, and the details of the song get added to the playing now section and the equalizer strats moving, The problem is when Click the first time it doesn’t work the sconde it works the third it the does’nt …, here is an example of what I’m doing.

[1] : https://i.stack.imgur.com/FI9sI.png

My Code :

const playingNow = document.querySelector('.song-p-now');
const equalizer = document.querySelectorAll('.eq')
const btns = Array.from(document.querySelectorAll('.song-details'));

const music = [
    {
    img: 'img/2.jpg',
    id:1,
    songName: 'Am I Wrong',
    audio : new Audio('audio/Am-I-wrong.mp3'),
    artist: 'Nico & Vinz',
    },
    {
    img: 'img/3.jpg',
    id:2,
    songName: 'Sex,Drugs,Etc',
    audio : new Audio('audio/Sex-Drugs-Etc.mp3'),
    artist: 'Beach Weather',
    
    },
    

    {
    img: 'img/7.jpg',
    id:3,
    songName: 'Me Myself & I ',
    audio : new Audio('audio/Me-Myself-I.mp3'),
    artist: 'G-easy',
    },

    {
    img: 'img/4.jpg',
    id:4,
    songName: 'Blood In The Water',
    audio : new Audio('audio/Blood-In-The-Water.mp3'),
    artist: 'grandson',  
    },

    {
    img: 'img/5.jpg',
    id:5,
    songName: 'Eastside',
    audio : new Audio('audio/Eastside.mp3'),
    artist: 'Benny Blanco',
    },

    {
    img: 'img/6.jpg',
    id:6,
    songName: 'Everything Black ',
    audio : new Audio('audio/Everything-Black.mp3'),
    artist: 'Unlike Puto',
    
    },
    
]



let isPlaying = true;


const btnsLoop = () => {
    for (j = 0; j < btns.length; j++) {
        const musicObject = music[j];
        const { img, id, songName, audio, artist } = musicObject;
        
    
        btns[j].addEventListener('click', () => {
            playingNow.innerHTML = `<div class="song-poster"><img src="${img}" alt=""></div>
            <div class="song-artist-name">
                <div class="song-name">${songName}</div>
                <div class="artist-name">${artist}</div>
            </div>`

            music.forEach(element => {
              element.audio.pause();
            });
            if (isPlaying) {
                musicObject.audio.play();
                equalizer.forEach((eq) => {
                eq.classList.add('animation');
                })
                isPlaying = false;
            }
            else {
                musicObject.audio.pause();
                musicObject.audio.currentTime = "0";
                equalizer.forEach((eq) => {
                    eq.classList.remove('animation');
                })
                isPlaying = true;
            }
            
  
            
          });
    }
}

btnsLoop();