title: Adding checkboxes dynamically from multi-select jQuery UI widget
body: <p>I'm using <a href="http://www.erichynds.com/blog/jquery-ui-multiselect-widget" rel="nofollow">Eric Hynds jQuery MultiSelect Widget</a> that is being populated from a javascript file. I'm able to dynamically add a checkbox by checking from the dropdown. I'm trying to attach the new checkbox and 'value' of the dropdown checkbox to appear under a 'Main' checkbox if it is also checked. To help illustrate with comments inside: <a href="http://jsfiddle.net/3u7Xj/12/" rel="nofollow">http://jsfiddle.net/3u7Xj/12/</a></p>
  
  <p>References:</p>
  
  <pre><code>&lt;select id="select" multiple="multiple" class="multiselect"&gt;
  &lt;/select&gt;
  &lt;input type="checkbox" name="chkMain1" value="Main1" id="Main1"&gt;&lt;label for="Main1"&gt;Main1&lt;/label&gt;&lt;br /&gt;
  &lt;input type="checkbox" name="chkMain2" value="Main2" id="Main2"&gt;&lt;label for="Main2"&gt;Main2&lt;/label&gt;&lt;br /&gt;
  &lt;input type="checkbox" name="chkMain3" value="Main3" id="Main3"&gt;&lt;label for="Main3"&gt;Main3&lt;/label&gt;&lt;br /&gt;
  </code></pre>
  
  <p>Populating drop down widget from js file:</p>
  
  <pre><code>var MYdata=[{
      "Value":"1",
      "ValueText":"name1"
  }
  ,{
      "Value":"2",
      "ValueText":"name2"
  }
  ,{
      "Value":"3",
      "ValueText":"name3"
  }];    
  $('#select').html(function(){
      return $.map(MYdata, function(v) {
          return "&lt;option id='"+ v.Value +"'&gt;" + v.Value + "-" + v.ValueText +"&lt;/option&gt;";
      }).join('');
  });
  </code></pre>
  
  <p>Any help would be greatly appreciated</p>