title: jQuery not working the second time with dynamic audio playlist
body: <p>I want to be able to play uploaded songs from a dynamic created folders(source) similar to reverb, soudcloud. This is a rails App with below generated html source code.</p>
  
  <p>Original tutorial by Brad Traversy: <a href="https://www.youtube.com/watch?v=WTwwX__o01M" rel="nofollow">https://www.youtube.com/watch?v=WTwwX__o01M</a>  </p>
  
  <p><strong>Problem is only the latest uploaded song within the first nested plays.The rest are not playing. I think jQuery is not working on the subsequent songs since the buttons are inactive.
  Any help on this please? Edit Fiddle: <a href="http://jsfiddle.net/91fgth2f/8/" rel="nofollow">http://jsfiddle.net/91fgth2f/8/</a></strong></p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>var audio;
  
  //Hide Pause Initially
  
  $('#pause').hide();
  $('#playlist').hide();
  
  
  
  //Initializer - Play First Song
  initAudio($('#playlist li:first-child'));
  
  function initAudio(element) {
    var song = element.attr('song');
    var title = element.text();
    var cover = element.attr('cover');
    var artist = element.attr('artist');
  
    //Create a New Audio Object
    audio = new Audio('media/' + song);
  
    if (!audio.currentTime) {
      $('#duration').html('0.00');
    }
  
    $('#audio-player .title').text(title);
    $('#audio-player .artist').text(artist);
  
    //Insert Cover Image
    $('img.cover').attr('src', 'images/covers/' + cover);
  
    $('#playlist li').removeClass('active');
    element.addClass('active');
  }
  
  
  //Play Button
  $('#play').click(function() {
    audio.play();
    $('#play').hide();
    $('#pause').show();
    $('#duration').fadeIn(400);
    showDuration();
  });
  
  //Pause Button
  $('#pause').click(function() {
    audio.pause();
    $('#pause').hide();
    $('#play').show();
  });
  
  //Stop Button
  $('#stop').click(function() {
    audio.pause();
    audio.currentTime = 0;
    $('#pause').hide();
    $('#play').show();
    $('#duration').fadeOut(400);
  });
  
  //Next Button
  $('#next').click(function() {
    audio.pause();
    var next = $('#playlist li.active').next();
    if (next.length == 0) {
      next = $('#playlist li:first-child');
    }
    initAudio(next);
    audio.play();
    showDuration();
  });
  }
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
  }
  body {
    font-family: arial;
    font-size: 13px;
    line-height: 1.5em;
    color: #000000;
    background: url(../images/bg.png);
  }
  .clearfix {
    clear: both;
  }
  .hidden {
    display: none;
  }
  #container {
    width: 700px;
    height: 100px;
    background: #eee;
    overflow: auto;
    margin: 0px auto;
  }
  #audio-image {
    position: relative;
    overflow: hidden;
    height: 4px;
    margin-bottom: 1px;
  }
  #audio-info {
    text-align: center;
  }
  #audio-info .artist {
    font-weight: bold;
  }
  .cover {
    width: 100%;
    z-index: 1;
  }
  input#volume {
    width: 95%;
    margin-left: 2%;
    -webkit-appearance: none !important;
    background: #ccc;
    height: 1px;
    margin-bottom: -15px;
  }
  input#volume::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background: url(../images/knob.png) no-repeat;
    height: 12px;
    width: 12px;
  }
  #buttons {
    width: 95%;
    display: block;
    margin-top: -15px;
    margin-left: 23px;
    overflow: auto;
  }
  button#play {
    width: 24px;
    height: 22px;
    background: url(../images/play.png) no-repeat;
    float: left;
    margin-top: 15px;
  }
  button#pause {
    width: 24px;
    height: 22px;
    background: url(../images/pause.png) no-repeat;
    float: left;
    margin-top: 15px;
  }
  button#stop {
    width: 24px;
    height: 22px;
    background: url(../images/stop.png) no-repeat;
    float: left;
    margin-top: 15px;
  }
  button#prev {
    width: 24px;
    height: 22px;
    background: url(../images/prev.png) no-repeat;
    float: left;
    margin-top: 15px;
  }
  button#next {
    width: 24px;
    height: 22px;
    background: url(../images/next.png) no-repeat;
    float: auto;
    margin-top: 15px;
  }
  #playlist {
    list-style-type: none;
    padding: 2px;
  }
  #playlist li {
    cursor: pointer;
    margin: 5px;
  }
  #tracker {
    position: relative;
    width: 100%;
  }
  #playlist li.active {
    font-weight: bold;
    padding: 3px;
    background: #666;
  }
  #progressBar {
    width: 80%;
    margin-left: 2%;
    margin-bottom: 40px;
    margin-top: -10px;
    height: 5px;
    background: url(../images/progress_bg.png) no-repeat;
    float: right;
  }
  #progress {
    background: url(../images/progress.png) no-repeat;
    height: 5px;
    display: inline-block;
  }
  #duration {
    font-family: arial;
    font-size: 13px;
    line-height: 1.5em;
    color: #fff;
    position: absolute;
    margin-top: -25px;
    right: 10px;
    padding: 4px 8px;
    background: #000;
    border-radius: 5px;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  
    &lt;table width="50%" border="0" cellspacing="0" cellpadding="0"&gt;
  
      &lt;!---It plays for the songs within the first nested: &lt;ul&gt; &lt;/ul&gt;--&gt;
  
      &lt;tr&gt;
  
        &lt;td align="left"&gt;
  
          &lt;div class="buttons"&gt;
  
            &lt;span&gt;      
        &lt;button id="play"&gt;&lt;/button&gt;
       &lt;button id="pause"&gt;&lt;/button&gt;
        &lt;button id="next"&gt;&lt;/button&gt;
      &lt;/span&gt;
  
  
            &lt;ul id="playlist" class="hidden"&gt;
  
              &lt;li song="song1.mp3" cover="cover1.jpg" artist="Artist1"&gt;Title.mp3&lt;/li&gt;
  
              &lt;!--- next song (song2.mp3) plays if added within this first nested: &lt;ul&gt; &lt;/ul&gt; --&gt;
              &lt;li song="song2.mp3" cover="cover1.jpg" artist="Artist2"&gt;Title2.mp3&lt;/li&gt;
  
            &lt;/ul&gt;
  
          &lt;/div&gt;
  
        &lt;/td&gt;
  
      &lt;/tr&gt;
  </code></pre>