列表附加到可折叠集的最后一个元素

Question

我想要创建动态可折叠集，并且每个集我都在添加动态列表视图。

以下是我的表现：

    function querySuccess(tx, results) {

        $.each(results.rows,function(index){ 
           var row = results.rows.item(index);
           var list=$('#List').append('<li><h3 class="ui-li-heading">'+'</h3><p class="ui-li-">'+row['data']+'</p></li>');

           var div = '<div data-role="collapsible" data-inset="false" data-iconpos="right"><h3>'+row["data"]+'</h3></div>';

           $(list).appendTo(div).parent().appendTo('[data-role="content"]').end().trigger("create");
           $('div[data-role=collapsible]').collapsible({theme:'c',refresh:true});

        });         
     } 

但是动态列表视图仅附加到最后一个可折叠元素，并且无法附加到其他元素。我犯的错是什么？