jQueryMobile : How to add contents to Collapsible Div Dynamically - jquery-mobile

Question

I have a collapsible-set div and within that 2 collapsible divs.
And I have to dynamically add elements to these collapsible divs dynamically, when clicking a plus button. I have tried many codes, but didn't work. Could you please tell me how to do that?
HTML Code
<div data-role="content">
<div data-role="collapsible-set" id="setAllCategory">
<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" id="setCategory1">
<h1 ><label>Food</label>
<a data-role="button" id="btnAddSubCat1" name="btnAddSubCat1" data-rel="popup" href="#" data-icon="plus" data-iconpos="notext" style="float:right;" ><a/></h1>
</div>
<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" id="setCategory2">
<h1 ><label>Dress</label>
<a data-role="button" id="btnAddSubCat2" name="btnAddSubCat2" data-rel="popup" href="#" data-icon="plus" data-iconpos="notext" style="float:right;" ><a/></h1>
</div>
</div>
</div>
JavaScript
var subCatObject = "<div class='ui-grid-b'>"
subCatObject +="<div class='ui-block-a'><label>Hi</label></div>"
subCatObject +="<div class='ui-block-b'><a href='#' data-role='button' data-iconpos='notext' data-icon='edit'></a></div>"
subCatObject +="<div class='ui-block-c'><a href='#' data-role='button' data-iconpos='notext' data-icon='delete'></a></div>"
subCatObject +="</div>";
$('#btnAddSubCat1').click(function (){
var temp = $(subCatObject);
$(temp).appendTo('#setCategory1').page();
$("#setCategory1").collapsibleset('refresh');
});

Answer 1

I changed your HTML as below
<div data-role="page" id="home">
<div data-role="content">
<div data-role="collapsible-set" id="setAllCategory" data-content-theme="d">
<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u"
id="setCategory1">
<h1><label>Food</label>
<a data-role="button" id="btnAddSubCat1" name="btnAddSubCat1" data-rel="popup" href="#" data-icon="plus" data-iconpos="notext" style="float:right;" ><a/></h1>
<div id="setCategoryContent1"></div>
</div>
<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u"
id="setCategory2">
<h1><label>Dress</label>
<a data-role="button" id="btnAddSubCat2" name="btnAddSubCat2" data-rel="popup" href="#" data-icon="plus" data-iconpos="notext" style="float:right;" ><a/></h1>
</div>
</div>
</div>
</div>
and your javascript as below
var subCatObject = "<div class='ui-grid-b'>"
subCatObject += "<div class='ui-block-a'><label>Hi</label></div>"
subCatObject += "<div class='ui-block-b'><a href='#' data-role='button' data-iconpos='notext' data-icon='edit'></a></div>"
subCatObject += "<div class='ui-block-c'><a href='#' data-role='button' data-iconpos='notext' data-icon='delete'></a></div>"
subCatObject += "</div>";
$('#btnAddSubCat1').bind('click', function () {
$("#setCategoryContent1").html(subCatObject);
$('#home').trigger('create');
});
I hope you will be able to take up from here.
Check out the working fiddle here http://jsfiddle.net/PKeSB/2/