When I click the play button the pause button disappears

Question

I have a sidebar with some songs and on each song there is the title and artist name and a play button. When I click on the play button the song starts playing (so far everything is ok) but the pause button should appear, instead when I click on the play button the pause button is shown.

 function populateTracklist() { let allList = document.querySelector('#tracklist'); tracks.forEach((track, index)=> { let card = document.createElement('div'); card.classList.add('col-12'); card.innerHTML = ` <div class="d-flex align-items-center justify-content-between px-4 py-3 border-main track-card"> <img class="img_size" src="${track.cover}" alt=""> <div class="text-white"> <h5 class="mb-0 tx-gradient">${track.artist}</h5> <p class="mb-0">${track.title}</p> </div> <i data-track="${index}" class="fas fa-play fs-3 tx-gradient pointer playlist-play"></i> <i class="fas fa-pause fs-3 tx-gradient pointer"></i> </div> ` allList.appendChild(card); }) let btnsPlay = document.querySelectorAll('.playlist-play'); btnsPlay.forEach(btn=> { btn.addEventListener('click', function() { let selectedTrack = btn.getAttribute('data-track'); trackcurr = selectedTrack; changeTrackDetails(); if (playing) { playing=false; play(); } //console.log(trackcurr); //console.log(btn.parentNode); btn.parentNode.classList.add('active'); }) }) }

 .border-main{ border-bottom: solid 4px var(--main); }.track-card.active{ background: linear-gradient(var(--black) 90%, var(--sec)); }.track-card.fa-pause{ display: none; }.track-card.active.fa-play{ display: none; }.track-card.active{ display: block; }.border-main.active{ border-bottom: solid 4px var(--sec); }

 <div id="sidebarmusic" class="open"> <div class="row" id="tracklist"> <div class="col-12"> </div> </div> </div>

Answer 1

You can add id attribute to your play and pause button.

id='play-${index}'
id='pause-${index}'

//so that on your event listener
//you can simply get the element via id.

let pause = document.querySelector(`#pause-${selectedTrack}`)

//then remove the class

pause.classList.remove("fa-pause")

//or toggle 

pause.classList.toggle("fa-pause")

sorry for typo.. i am on mobile.