Adding checkboxes dynamically from multi-select jQuery UI widget

Question

I'm using Eric Hynds jQuery MultiSelect Widget 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: http://jsfiddle.net/3u7Xj/12/

References:

<select id="select" multiple="multiple" class="multiselect">
</select>
<input type="checkbox" name="chkMain1" value="Main1" id="Main1"><label for="Main1">Main1</label><br />
<input type="checkbox" name="chkMain2" value="Main2" id="Main2"><label for="Main2">Main2</label><br />
<input type="checkbox" name="chkMain3" value="Main3" id="Main3"><label for="Main3">Main3</label><br />

Populating drop down widget from js file:

var MYdata=[{
    "Value":"1",
    "ValueText":"name1"
}
,{
    "Value":"2",
    "ValueText":"name2"
}
,{
    "Value":"3",
    "ValueText":"name3"
}];    
$('#select').html(function(){
    return $.map(MYdata, function(v) {
        return "<option id='"+ v.Value +"'>" + v.Value + "-" + v.ValueText +"</option>";
    }).join('');
});

Any help would be greatly appreciated

Answer 1

Hopefully this will give you some direction on how it could be done..

click: function (event, ui) {
            var lbl = ui.value;
            if(ui.checked){
                var ctrl = '<input type="checkbox" name="chk" checked="checked" class="chk" id="'+lbl+'">';
                $("[id^=Main]:checked").each(function(){
                    $(this).nextAll('.holder:first').append('<div>'+ctrl+lbl+'</div>');    
                });
            }
            else {
                $("[id^=Main]:checked").each(function(){
                    $(this).nextAll('.holder:first').find('div input[id='+lbl+']').parent().remove();
                });
            }

            if (ui.checked && $(".multiselect").children(":checked").length >= 5) {
                return false;
            }

        }

Example:

http://jsfiddle.net/trevordowdle/3u7Xj/14/