jPlayer Multiple Stream Instances - jplayer

Question

I need to use multiple stream instances with jPlayer using this player. By default it didn't so I tried to make several changes but still can't get it work. First player works but it plays all the other streams together and the second player can't be triggered at all. Any idea? My code is as follows:
SCRIPT
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
var stream = {
title: "ABC Jazz",
mp3: "http://listen.radionomy.com/abc-jazz"
},
ready = false;
jQuery("#jquery_jplayer_11").jPlayer({
ready: function (event) {
ready = true;
jQuery(this).jPlayer("setMedia", stream);
},
pause: function() {
jQuery(this).jPlayer("clearMedia");
},
error: function(event) {
if(ready && event.jPlayer.error.type === jQuery.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
jQuery(this).jPlayer("setMedia", stream).jPlayer("play");
}
},
swfPath: "js",
supplied: "mp3",
preload: "none",
wmode: "window",
keyEnabled: true
});
var stream2 = {
title: "Second",
mp3: "http://stream.x-x-x-x.com:1234/stream"
},
ready = false;
jQuery("#jquery_jplayer_12").jPlayer({
ready: function (event) {
ready = true;
jQuery(this).jPlayer("setMedia", stream2);
},
pause: function() {
jQuery(this).jPlayer("clearMedia");
},
error: function(event) {
if(ready && event.jPlayer.error.type === jQuery.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
jQuery(this).jPlayer("setMedia", stream2).jPlayer("play");
}
},
swfPath: "js",
supplied: "mp3",
preload: "none",
wmode: "window",
keyEnabled: true
});
});
//]]>
</script>
HTML
<div id="jquery_jplayer_11" class="jp-jplayer" style="width: 0px; height: 0px;">
<img id="jp_poster_0" style="width: 0px; height: 0px; display: none;">
<audio id="jp_audio_0" preload="none"></audio>
</div>
<div id="jquery_jplayer_12" class="jp-jplayer" style="width: 0px; height: 0px;">
<img id="jp_poster_0" style="width: 0px; height: 0px; display: none;">
<audio id="jp_audio_0" preload="none"></audio>
</div>
<div id="jp_container_1" class="jp-audio-stream">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li class="pp-li">play</li>
<li class="pp-li">pause</li>
<li class="mu-li">mute</li>
<li class="mu-li">unmute</li>
<li class="vo-li">max volume</li>
</ul>
<div class="jp-volume-bar" style="">
<div class="jp-volume-bar-value" style="width: 80%;"></div>
</div>
</div>
</div>
<div id="jp_container_2" class="jp-audio-stream">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li class="pp-li">play</li>
<li class="pp-li">pause</li>
<li class="mu-li">mute</li>
<li class="mu-li">unmute</li>
<li class="vo-li">max volume</li>
</ul>
<div class="jp-volume-bar" style="">
<div class="jp-volume-bar-value" style="width: 80%;"></div>
</div>
</div>
</div>

Answer 1

set
cssSelectorAncestor: "#jp_container_2"
cssSelectorAncestor: "#jp_container_1"
like this for all players and after the playlist options (that means at the bottom of the code )
$("#jplayer_inspector_1").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});
$("#jplayer_inspector_2").jPlayerInspector({jPlayer:$("#jquery_jplayer_2")});
put like this for all-players then it will works , if not means put all the codes here then I will correct the errors