Question

I am trying to load two instances of jQuery UI selectable, but there seems to be an issue with the second one. How can I solve this?

Here is my code: http://jsfiddle.net/3pKQf/1/

HTML

Div 1
<div id="div1">
        <ul id="selectable">
          <li class="ui-state-default">1</li>
          <li class="ui-state-default">2</li>
          <li class="ui-state-default">3</li>
          <li class="ui-state-default">4</li>
          <li class="ui-state-default">5</li>
          <li class="ui-state-default">6</li>
          <li class="ui-state-default">7</li>
          <li class="ui-state-default">8</li>
          <li class="ui-state-default">9</li>
          <li class="ui-state-default">10</li>
          <li class="ui-state-default">11</li>
          <li class="ui-state-default">12</li>
          <li class="ui-state-default">13</li>
          <li class="ui-state-default">14</li>
          <li class="ui-state-default">15</li>
        </ul>
</div><br><br>
Div 2
    <div id="div2">
            <ul id="selectable">
              <li class="ui-state-default">1</li>
              <li class="ui-state-default">2</li>
              <li class="ui-state-default">3</li>
              <li class="ui-state-default">4</li>
              <li class="ui-state-default">5</li>
              <li class="ui-state-default">6</li>
              <li class="ui-state-default">7</li>
              <li class="ui-state-default">8</li>
              <li class="ui-state-default">9</li>
              <li class="ui-state-default">10</li>
              <li class="ui-state-default">11</li>
              <li class="ui-state-default">12</li>
              <li class="ui-state-default">13</li>
              <li class="ui-state-default">14</li>
              <li class="ui-state-default">15</li>
            </ul>
            </div>
​

CSS

#selectable .ui-selecting {
    background: #C41C7B;
}
#selectable .ui-selected {
    background: #C41C7B;
    color: white;
}
#selectable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 450px;
}
#selectable li {
    margin: 0px;
    padding: 3px;
    float: left;
    width: 16px;
    height: 16px;
    font-size: 10px;
    font-family: Arial;
    text-align: center;
}
​

JavaScript

$(function() {
    $("#selectable").bind('mousedown', function (e) {
        e.metaKey = true;
    }).selectable();
});

Answer 1

They need different id’s. Both are #selectable.

Here’s a working update using a class .selectable. http://jsfiddle.net/3pKQf/4/