Multiple instances not loading properly

[Joel Worsham]

I have a strange bug. I have multiple players on one page. They all function mostly correctly. But for some reason when you play any of them (except the first one on the page), they don't play. BUT, after you play the topmost player, as soon as you hit pause, the next one loads and the will play on command. THen once you play that one and pause, the NEXT one loads. And so on, and so forth.

This really has me stumped. I want to make sure I'm instancing them correctly. They each have unique ID's for both the player div itself "#jquery_jplayer_(n)" and "#jp_container_(n)".

And I'm using this function to initialize all of them (note, I'm using php and am setting the data attributes accordingly for each player)

  jQuery(function(){

    jQuery(".jp-jplayer").each(function(){

    var song_title = jQuery(this).attr('data-title'),

    song_url = jQuery(this).attr('data-url'),

    song_instance = jQuery(this).attr('data-instance');

    jQuery(this).jPlayer({

     ready: function () {

       jQuery(this).jPlayer("setMedia", {

         title: song_title,

         mp3: song_url

       });

     },

     cssSelectorAncestor: "#jp_container_"+song_instance,

     swfPath: "../includes",

     supplied: "mp3"

   });

    });

  });

Do you see anything I might be doing wrong?