jPlayer Jukebox: Multiple instances

Example for https://www.gyrocode.com/projects/jplayer-jukebox/

by gyrocode

HTML

<link rel="stylesheet" href="//gyrocode.github.io/jplayer-jukebox/0.6.6/skin/uno/jplayer.uno.min.css">
<script src="//gyrocode.github.io/jplayer-jukebox/0.6.6/jplayer.jukebox.bundle.min.js"></script>
<h3><a href="http://www.gyrocode.com/projects/jplayer-jukebox/">jPlayer Jukebox add-on</a>  <small>Multiple instances</small></h3>
<hr><br/>
    
<p id="jplayer-jukebox1-playlist">
<a href="//gyrocode.github.io/jplayer-jukebox/demo/media/wav.wav">.WAV file</a><br/>   
<a href="//gyrocode.github.io/jplayer-jukebox/demo/media/mp3.mp3">.MP3 file</a><br/>    
<a href="//gyrocode.github.io/jplayer-jukebox/demo/media/ogg.ogg">.OGG file</a><br/>       
</p>

<div id="jplayer-jukebox1"></div>

<p id="jplayer-jukebox2-playlist">
<a href="//gyrocode.github.io/jplayer-jukebox/demo/media/wav.wav">.WAV file</a><br/>   
<a href="//gyrocode.github.io/jplayer-jukebox/demo/media/mp3.mp3">.MP3 file</a><br/>    
<a href="//gyrocode.github.io/jplayer-jukebox/demo/media/ogg.ogg">.OGG file</a><br/>       
</p>

<div id="jplayer-jukebox2"></div>

JavaScript

$(document).ready(function(){
   // Initialize first jPlayerJukebox
   var jpjb1 = new jPlayerJukebox({
      'jukeboxOptions': {
         'position': 'static',
         'className': 'ui-light ui-gradient',
         'id': 'jplayer-jukebox1',
         'selectorParse': '#jplayer-jukebox1-playlist'
      }
   });
   
   // Initialize second jPlayerJukebox
   var jpjb2 = new jPlayerJukebox({
      'jukeboxOptions': {
         'position': 'static',
         'className': 'ui-light ui-gradient',
         'id': 'jplayer-jukebox2',
         'selectorParse': '#jplayer-jukebox2-playlist'
      }
   });  
});