Javascript jQuery可排序追加到Div上

我有一个购物篮，我需要能够添加多个项目，我已经配置了jQuery sortable插件，但是，当我添加多个额外项目时，当我将添加另一个项目添加到placer div时，它们会组合在一起，我想这是个问题，但是我该如何做才能添加更多项目，但是仍然保持可排序函数在单个项目上工作吗

请帮助我，或者有人能给我看一把工作小提琴吗？在那里，添加更多的食物不会将它们归入foodplacer分区

<td>
            <ul id="sortable">
<?php
    $mCount = 1;
    if(isset($_POST['itemDetails']) && is_array($_POST['itemDetails']) && count($_POST['itemDetails']) > 0){
        foreach($_POST['itemDetails'] as $itemDetail){
            if(!empty($itemDetail['title']) || !empty($itemDetail['brand']) || !empty($itemDetail['order']) || !empty($itemDetail['notes'])){
                echo('<li class="ui-state-fooddefault">
                <input style="font-size:14px" type="text" size="25" name="itemDetails['.$mCount.'][title]" value="'.$itemDetail['title'].'" id="itemDetailTitle'.$mCount.'" onKeyPress="return disableEnterKey(event)" /><br />
                <input style="font-size:14px" type="text" size="25" name="itemDetails['.$mCount.'][brand]" value="'.$itemDetail['brand'].'" id="itemDetailbrand'.$mCount.'" onKeyPress="return disableEnterKey(event)" /><br />
            <input style="font-size:14px" type="text" size="40" name="itemDetails['.$mCount.'][notes]" value="'.$itemDetail['notes'].'" id="foodNotes'.$mCount.'" onKeyPress="return disableEnterKey(event)" /></li>');
        $mCount++;  
            }
        } 
    } else {
        //INITAL REQUEST IF 0 POST DATA
        echo('<li class="ui-state-fooddefault"><p class="itemDetailTrackNumber">Track '.$mCount.'</p>
        <label for="itemDetailTitle'.$mCount.'">Title</label>
        <input style="font-size:14px" type="text" size="25" name="itemDetails['.$mCount.'][title]" value="" id="itemDetailTitle'.$mCount.'"  onkeyup="showResult(this.value)/>
        <div id="livesearch"></div>
        <label for="itemDetailbrand'.$mCount.'">brand</label> 
        <input style="font-size:14px" type="text" size="25" name="itemDetails['.$mCount.'][brand]" value="" id="itemDetailbrand'.$mCount.'" onKeyPress="return disableEnterKey(event)" />
        <label for="foodNotes'.$mCount.'">Notes</label><input style="font-size:14px" type="text" size="40" name="itemDetails['.$mCount.'][notes]" value="" id="foodNotes'.$mCount.'" onKeyPress="return disableEnterKey(event)" /></li>');
        $mCount++;
    }

?>
        <script type="text/javascript">
            var currCount = <?php echo($mCount); ?>;
            function addNewItem(){
                jQuery("#foodPlacer").append('<li class="ui-state-fooddefault"><label>Track '+currCount+'</label><label for="itemDetailTitle'+currCount+'">Title</label><input style="font-size:14px" type="text" size="25" name="itemDetails['+currCount+'][title]" value="" id="itemDetailTitle'+currCount+'" onkeyup="showResult(this.value); onclick=showsearch();" autocomplete="off" onKeyPress="return disableEnterKey(event)" /><div id="livesearch"></div><label for="itemDetailbrand'+currCount+'">brand</label><input style="font-size:14px" type="text" size="25" name="itemDetails['+currCount+'][brand]" value="" id="itemDetailbrand'+currCount+'" /><input style="font-size:14px" type="text" size="40" name="itemDetails['+currCount+'][notes]" value="" id="foodNotes'+currCount+'" /></li>');                
                jQuery("#itemDetailTitle"+currCount).keypress(function(event){  return disableEnterKey(event); });
                currCount++;
                return false;
            }
            function disableEnterKey(e){
                var key;
                if(window.event)
                    key = window.event.keyCode;     //IE
                else
                    key = e.which;     //firefox
                if(key == 13)
                    return false;   else    return true;
            }
        </script>
       <a href="#" onclick="addNewItem(); return false;">Add Another food Item</a> <div id="foodPlacer"></div></ul></td>

将其附加到Sortable而不是foodplacer，抱歉，伙计们！今天是星期二