Update audio.js

audio.js

@@ -1,41 +1,40 @@
-let songAdded = false; // Flag to track if the song is already added to the playlist
+// Get all love icons and add event listeners
+const loveIcons = document.querySelectorAll('.love-icon');
 
-function togglePlaylist() {
-    const loveIcon = document.querySelector('.love-icon');
+loveIcons.forEach(loveIcon => {
+    loveIcon.addEventListener('click', togglePlaylist);
+});
+
+function togglePlaylist(event) {
+    const clickedIcon = event.target;
+    const songCard = clickedIcon.closest('.movie');
+    const audioSource = songCard.querySelector('.song-audio source').getAttribute('src');
+    const loveIcon = songCard.querySelector('.love-icon');
 
-    if (!songAdded) {
+    if (!songCard.classList.contains('song-added')) {
         // Add the song to the playlist
-        addToPlaylist();
+        addToPlaylist(songCard, audioSource);
 
         // Change the color of the love icon to indicate it's selected
         loveIcon.classList.add('selected');
+        songCard.classList.add('song-added');
     } else {
         // Remove the song from the playlist
-        removeFromPlaylist();
+        removeFromPlaylist(songCard);
 
         // Change the color of the love icon back to its original color
         loveIcon.classList.remove('selected');
+        songCard.classList.remove('song-added');
     }
 }
 
-function addToPlaylist() {
-    // Get information about the song
-    const songTitle = document.querySelector('.title').innerText;
-    const artist = 'Singer Name'; // You can replace this with the actual artist name
-    const audioSource = document.querySelector('#audio source').getAttribute('src');
-
+function addToPlaylist(songCard, audioSource) {
     // Create elements for the new song in the playlist
     const playlist = document.querySelector('.playlist');
 
     const newSongDiv = document.createElement('div');
     newSongDiv.classList.add('song1');
 
-    const newSongTitle = document.createElement('h3');
-    newSongTitle.textContent = songTitle;
-
-    const newArtist = document.createElement('p');
-    newArtist.textContent = `Artist: ${artist}`;
-
     const newAudio = document.createElement('audio');
     newAudio.setAttribute('controls', '');
 
@@ -44,25 +43,19 @@ function addToPlaylist() {
     audioSourceElem.setAttribute('type', 'audio/mpeg');
 
     newAudio.appendChild(audioSourceElem);
-
-    newSongDiv.appendChild(newSongTitle);
-    newSongDiv.appendChild(newArtist);
     newSongDiv.appendChild(newAudio);
 
     // Add the new song to the playlist
     playlist.appendChild(newSongDiv);
-
-    songAdded = true; // Set the flag to true after adding the song
 }
 
-function removeFromPlaylist() {
+function removeFromPlaylist(songCard) {
     const playlist = document.querySelector('.playlist');
     const songEntry = playlist.querySelector('.song1');
 
     // Remove the song from the playlist
     if (songEntry) {
         playlist.removeChild(songEntry);
-        songAdded = false; // Set the flag to false after removing the song
     }
 }