title: HTML5 audio player not working on playlist
body: <p>I have an HTML5 audio player, it is simple coded with JavaScript.<br/>
  It's working fine on a single audio. But the problem is here when I'm adding more audios the only the first one is working and the remaining were not.
  Check it out of <a href="http://jsfiddle.net/8dzd6bh4/5/" rel="nofollow">JSFIDDLE</a><br>
  <strong>HTML</strong></p>
  
  <pre><code> &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
      &lt;audio id="yourAudio" preload='none'&gt;
         &lt;source src='http://freshly-ground.com/data/audio/mpc/20090119%20-%20Untitled%20Groove.mp3' type='audio/mpeg' /&gt;
      &lt;/audio&gt;
      &lt;a href="#"  &gt;&lt;span id="audioControl" class="glyphicon glyphicon-play-circle"&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;audio id="yourAudio" preload='none'&gt;
         &lt;source src='http://audio.khanqah.org/AK20021104%20Rozay%20or%20taqwa%20may%20rabt.mp3' type='audio/mpeg' /&gt;
      &lt;/audio&gt;
      &lt;a href="#"  &gt;&lt;span id="audioControl" class="glyphicon glyphicon-play-circle"&gt;&lt;/span&gt;&lt;/a&gt;
  
      &lt;audio id="yourAudio" preload='none'&gt;
         &lt;source src='http://audio.khanqah.org/AK19991224%20Tark%20e%20masiat%20may%20takheer%20na%20kijiay.mp3' type='audio/mpeg' /&gt;
      &lt;/audio&gt;
      &lt;a href="#"  &gt;&lt;span id="audioControl" class="glyphicon glyphicon-play-circle"&gt;&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p><strong>Js</strong></p>
  
  <pre><code>var yourAudio = document.getElementById('yourAudio'),
      ctrl = document.getElementById('audioControl');
  
  ctrl.onclick = function () {
  
  
  if(ctrl.className == "glyphicon glyphicon-play-circle") {
          ctrl.className="glyphicon glyphicon-pause";
         yourAudio["play"]();
  }
  else if (ctrl.className == "glyphicon glyphicon-pause"){
  
       ctrl.className="glyphicon glyphicon-play-circle";
      yourAudio["pause"]();
  
  }
  };
  </code></pre>