title: How do I loop through a list of songs without all the songs playing simultaneously (JavaScript)?
body: <p>I have a list of audio tags containing songs in my HTML document:</p>
  
  <pre><code>&lt;div class="pop"&gt;
                  &lt;p&gt;Pop&lt;/p&gt;
                  &lt;!--Pop Songs--&gt;
                  &lt;audio src="./Pop/We Don't Talk Anymore - Charlie Puth feat. Selena Gomez.mp3"&gt;&lt;/audio&gt;
                  &lt;audio src="./Pop/Senorita - Camila Cabello feat. Shawn Mendes.mp3"&gt;&lt;/audio&gt;
                  &lt;audio src="./Pop/Sucker - Jonas Brother.mp3"&gt;&lt;/audio&gt;
                  &lt;audio src="./Pop/Sunflower - Post Malone feat. Swae Lee.mp3"&gt;&lt;/audio&gt;
                  &lt;audio src="./Pop/No Brainer - DJ Khaled feat. Justin Bieber, Quavo, Chance The Rapper.mp3"&gt;&lt;/audio&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My objective is to loop through them (play each individual song) using Javascript. The issue I keep running into is that all the songs are being played simultaneously, and not each track being played individually, one after the other, like I want it to. How can I fix this? </p>
  
  <p>This the JS code I previously tried, but as I mentioned, all the songs in the list are played simultaneously, which I don't want:  </p>
  
  <pre><code>const popSongs = document.querySelectorAll(".pop audio");
  
  popSongs.forEach(song =&gt; {
      song.play();
  })
  </code></pre>