so i have been trying to make a music playlist program that, and i have been trying to make it trigger each song independantly(just like how all music players do) but my script seems to work only when i have only one song in my html, so when i added 12 songs and ordered them with data-attribute and then tried to click the button nothing happened and then i tried to use console.log to check what happened and apparently all 12 songs got triggered at once
here is my javascript
`const songs = document.querySelectorAll(“[data-songs]”);
const icons = document.querySelector(“#icon”);
`
songs.forEach((song) => {
icon.addEventListener("click", function () {
console.log(song);
//put code of icon here
if (mySong.paused) {
mySong.play();
icon.src = "/images/pause.png";
} else {
mySong.pause();
icon.src = "/images/play.png";
}
});
});
`
and here is my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/css/styles.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<title>Music App</title>
</head>
<body>
<div class="music-container">
<div class="music-header">
<i class="fa fa-angle-left"></i>
<div class="title">
<p>My Music</p>
</div>
<i class="fa fa-search"> </i>
</div>
<div class="music-playlist">
<div class="music-menu text-center">
<div class="menu">
<ul>
<li><a href="#">Songs</a></li>
<li><a href="#">Albums</a></li>
<li><a href="#">Artist</a></li>
<li><a href="#">Generes</a></li>
</ul>
</div>
</div>
<div class="music-box">
<div class="music-info">
<div class="music-img">
<img src="images/Filosofem.jpg" alt="" />
</div>
<div class="music-name">
<h6>Single Song Title</h6>
<audio id="mySong" data-songs="1">
<source src="/music/a.mp3" type="audio/mp3" />
</audio>
<p>Single name and music director</p>
</div>
<img src="/images/play.png" id="icon" style="padding-right: 20px" />
</div>
<hr />
<div class="music-info">
<div class="music-img">
<img src="images/Filosofem.jpg" alt="" />
</div>
<div class="music-name">
<h6>Single Song Title</h6>
<audio id="mySong" data-songs="2">
<source src="/music/b.mp3" type="audio/mp3" />
</audio>
<p>Single name and music director</p>
</div>
<img src="/images/play.png" id="icon" style="padding-right: 20px" />
</div>
<hr />
<div class="music-info">
<div class="music-img">
<img src="images/Filosofem.jpg" alt="" />
</div>
<div class="music-name">
<h6>Single Song Title</h6>
<audio id="mySong" data-songs="3">
<source src="/music/c.mp3" type="audio/mp3" />
</audio>
<p>Single name and music director</p>
</div>
<img src="/images/play.png" id="icon" style="padding-right: 20px" />
</div>
<hr />
<div class="music-info">
<div class="music-img">
<img src="images/Filosofem.jpg" alt="" />
</div>
<div class="music-name">
<h6>Single Song Title</h6>
<audio id="mySong" data-songs="4">
<source src="/music/d.mp3" type="audio/mp3" />
</audio>
<p>Single name and music director</p>
</div>
<img src="/images/play.png" id="icon" style="padding-right: 20px" />
</div>
<hr />
<div class="music-info">
<div class="music-img">
<img src="images/Filosofem.jpg" alt="" />
</div>
<div class="music-name">
<h6>burzum</h6>
<audio id="mySong" data-songs="5">
<source src="/music/e.mp3" type="audio/mp3" />
</audio>
<p>Single name and music director</p>
</div>
<img src="/images/play.png" id="icon" style="padding-right: 20px" />
</div>
<hr />
<div class="music-info">
<div class="music-img">
<img src="images/Filosofem.jpg" alt="" />
</div>
<div class="music-name">
<h6>Single Song Title</h6>
<audio id="mySong" data-songs="6">
<source src="/music/f.mp3" type="audio/mp3" />
</audio>
<p>Single name and music director</p>
</div>
<img src="/images/play.png" id="icon" style="padding-right: 20px" />
</div>
<hr />
<div class="music-info">
<div class="music-img">
<img src="images/Filosofem.jpg" alt="" />
</div>
<div class="music-name">
<h6>Single Song Title</h6>
<audio id="mySong" data-songs="7">
<source src="/music/g.mp3" type="audio/mp3" />
</audio>
<p>Single name and music director</p>
</div>
<img src="/images/play.png" id="icon" style="padding-right: 20px" />
</div>
<hr />
<div class="music-info">
<div class="music-img">
<img src="images/Filosofem.jpg" alt="" />
</div>
<div class="music-name">
<h6>Single Song Title</h6>
<audio id="mySong" data-songs="8">
<source src="/music/h.mp3" type="audio/mp3" />
</audio>
<p>Single name and music director</p>
</div>
<img src="/images/play.png" id="icon" style="padding-right: 20px" />
</div>
<hr />
<div class="music-info">
<div class="music-img">
<img src="images/Filosofem.jpg" alt="" />
</div>
<div class="music-name">
<h6>Single Song Title</h6>
<audio id="mySong" data-songs="9">
<source src="/music/i.mp3" type="audio/mp3" />
</audio>
<p>Single name and music director</p>
</div>
<img src="/images/play.png" id="icon" style="padding-right: 20px" />
</div>
<hr />
<div class="music-info">
<div class="music-img">
<img src="images/Filosofem.jpg" alt="" />
</div>
<div class="music-name">
<h6>Single Song Title</h6>
<audio id="mySong" data-songs="10">
<source src="/music/j.mp3" type="audio/mp3" />
</audio>
<p>Single name and music director</p>
</div>
<img src="/images/play.png" id="icon" style="padding-right: 20px" />
</div>
<hr />
<div class="music-info">
<div class="music-img">
<img src="images/Filosofem.jpg" alt="" />
</div>
<div class="music-name">
<h6>Single Song Title</h6>
<audio id="mySong" data-songs="11">
<source src="/music/k.mp3" type="audio/mp3" />
</audio>
<p>Single name and music director</p>
</div>
<img src="/images/play.png" id="icon" style="padding-right: 20px" />
</div>
<hr />
<div class="music-info">
<div class="music-img">
<img src="images/Filosofem.jpg" alt="" />
</div>
<div class="music-name">
<h6>Single Song Title</h6>
<audio id="mySong" data-songs="12">
<source src="/music/m.mp3" type="audio/mp3" />
</audio>
<p>Single name and music director</p>
</div>
<img src="/images/play.png" id="icon" style="padding-right: 20px" />
</div>
</div>
</div>
<div class="music-play">
<div class="play-image">
<img src="images/Filosofem.jpg" alt="" />
</div>
<div class="play-controls">
<div class="controls">
<div class="song-name">
<h5>Dunkelheit</h5>
<p>Burzum</p>
</div>
<div class="play-icon">
<i class="fa fa-step-backward"> </i>
<i class="fa fa-play"> </i>
<i class="fa fa-step-forward"> </i>
</div>
</div>
<div class="music-progress">
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
</div>
</div>
</div>
<script src="/Script/jquery-3.6.0.min.js"></script>
<script src="/Script/script.js"></script>
</body>
</html>
```