Multiple Selectable Problem

Multiple Selectable Problem


I have a problem with a multiple selectable,
like this :
<script language="javascript">
$(document).ready(function () {
    $('.submenu').hide();
    $(".submenu").selectable({
        selected: function (ev,ui) {
            var stats_menu = $(this).attr('id');
            $(".ui-selected", this).each(function(){
                var tab_ajax = $(this).attr('id');
                alert(stats_menu+tab_ajax);
            });
        }
    });
    $('#selectable').selectable({
        filter: 'div',
        selected: function (ev,ui) {
            $(".ui-selected", this).each(function(){
                $(this).next().slideToggle();
            });
        }
    });
    $('#category').load('ajax/dailyTask/set_category');
});
</script>
<ul id="selectable" class="ui-selectable">
        <div class="ui-state-default ui-corner-top">Daily Task</div>
            <ul id="dailytask" class="submenu ui-widget-content ui-corner-
bottom">
                <li id="create_task">Create New</li>
                <li id="list_task">List Task</li>
            </ul>
        <div class="ui-state-default ui-corner-top">Purchasing</div>
            <ul id="purchasing" class="submenu ui-widget-content ui-corner-
bottom">
                <li id="create_purchasing">Create New</li>
                <li id="list_purchasing">List</li>
            </ul>
        <div class="ui-state-default ui-corner-top">Simpan</div>
            <ul id="category" class="submenu ui-widget-content ui-corner-
bottom">
            </ul>
    </ul>
Example : www.ahrie.co.nr/jquery_ci
Please help meee T_T