title: Unable To Display Multiple jPicker Color Pickers On the Same Page
body: <p>I am having difficulty getting multiple jPicker instances of the same type to display on the same web page. Here's some sample code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;script type="text/javascript" src="js/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jpicker-1.1.6/jpicker-1.1.6.min.js"&gt;&lt;/script&gt;
      &lt;link href="js/jpicker-1.1.6/css/jPicker-1.1.6.min.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="testArea"&gt;
          &lt;script type="text/javascript"&gt;            
              $(document).ready(function() {
                  $('#Expandable').jPicker( {
                      window: {
                          expandable: true,
                          alphaSupport: true,
                          position: {
                              x: '40px',
                              y: '0px'
                          }
                      },
                      images: {
                          clientPath: "js/jpicker-1.1.6/images/"
                      }
                 });
              });
          &lt;/script&gt;
  
          &lt;div id="colorSelectors"&gt;
              &lt;input type="checkbox" value="Hamburgers" checked="yes" /&gt; Hamburgers
                  &lt;span id="Expandable"&gt;&lt;/span&gt; &lt;br /&gt;
              &lt;input type="checkbox" value="Hot Dogs" checked="yes" /&gt; Hot Dogs
                  &lt;span id="Expandable"&gt;&lt;/span&gt; &lt;br /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's what I'm getting:</p>
  
  <p><img src="https://i.stack.imgur.com/Bc23T.png" alt="My Sample Web Page"></p>
  
  <p>What's odd to me is that if I use different types of jPickers, I can have multiple instances on the same page, but only one instance of each type. For instance, I can use an "Expandable" picker and an "Inline" picker on the same page, but I cannot use 2 "Inline" pickers on the same page.</p>
  
  <p>The one exception is that I can get multiple instances to work when the jPickers are bound to an <code>&lt;input&gt;</code> element, just like the <a href="http://www.digitalmagicpro.com/jPicker/#Binded" rel="nofollow noreferrer">example on the jPicker website</a>. But I can't this to work for any of the other types of pickers.</p>