Аудио проигрыватель. Как сделать это через div?

Question

Я новичок в Javascript (я кодирую только в php) Я хочу переделать этот плеер в DIVs. Но я не могу понять, как передавать блоки DIV в функцию Audiojs. Пожалуйста, посмотрите на игрока. Нужен совет.

http://kolber.github.com/audiojs/demos/test6.html

    <script>
  jQuery(document).ready(function($) { 
    // Setup the player to autoplay the next track
    var a = audiojs.createAll({
      trackEnded: function() {
        var next = $('#ol #li.playing').next();
        if (!next.length) next = $('#ol #li').first();
        next.addClass('playing').siblings().removeClass('playing');
        audio.load($('a', next).attr('data-src'));
        audio.play();
      }
    });

     var audio = a[0];

    // Load in a track on click
    $('#ol #li').click(function(e) {
      e.preventDefault();
      $(this).addClass('playing').siblings().removeClass('playing');
      audio.load($('a', this).attr('data-src'));
      audio.play();
    });

  });
</script>


    <div id="wrapper">
  <h1>wait what notorious xx <em>(2009)</em></h1>
  <audio preload></audio>

    <div id="ol">
            <span style="float: right;"><a onclick="alert('1')">add</a></span>
            <div id="li"><a data-src="http://s3.amazonaws.com/audiojs/04-islands-is-the-limit.mp3">play</a></div>

            <span style="float: right;"><a onclick="alert('2')">add</a></span>
            <div id="li"><a data-src="http://s3.amazonaws.com/audiojs/03-its-all-about-the-crystalizabeths.mp3">play 2</a></div>

            <span style="float: right;"><a onclick="alert('3')">add</a></span>
            <div id="li"><a data-src="http://s3.amazonaws.com/audiojs/04-islands-is-the-limit.mp3">play 3</a></div>
        </div>

    </div>

Проблема в том, что я хочу поместить больше элементов div внутри Но этот скрипт принимает следующий элемент DOM.

Я думаю, что проблема с var next = $('#ol #li.playing'). Next();