Jquery Mobile collapsible fails after empty()?

Question

I have a collapsible generated dynamically, but after an calling .empty() and generate another collapsible dynamically it won't be visible as a collapsible. All I want is that the collapsible generates correctly after the .empty() event.

Making the collapsible dynamically for the first time:

After .empty() and making the collapsible dynamically for the nth time:

Some of the JS of how I create the collapsible and then append the buttons:

function createButton(buttonText,hrefLink,onclk,id) {
    console.log('=>'+onclk);
    var button = '<a href="'+hrefLink+'" onClick="'+onclk+'" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c" data-role="button" data-theme="c"' + '' + 'id="' + id + '"' + '>' +
        '<span class="ui-btn-inner ui-btn-corner-all">' +
        '<span class="ui-btn-text">' + buttonText + '</span>' +
        '</span>' +
        '</a>';
    return button;
}
function createCollapsible(collapsibleText,id){
        var collapsible = "<div data-role='collapsible' data-theme='a' id='set" + id + "'><h3>" + collapsibleText + "</h3></div>";
    return collapsible;
}

function createCurrentSets(station,set,container){
    $('#sampleSets').empty();
    $('#addSampleSet').hide();
        if(set === 'SNGL'){
            save_data('singleMultiContainer','single');
            save_data('set',set);
            $('#sampleSets').append(createCollapsible('Single',set));
            for(i=0;i<ls.length;i++){
                if(ls.key(i).match(stationSetContainerRegex)){
                var query = ls.key(i);
                var data = query.split('&');
                if(data[0]===station && data[1] === set){
                $('#set'+set).append(createButton(data[2],'#sampleParametersPage',"getJsonFromLocalStorage('"+station+'&'+set+'&'+data[2]+"');",data[2])).trigger('create');//createButton(set,'#setProperties',"changeSet(this.id)",set));
                    console.log('Current Sample created');
                }
                }
            }

        }else if ( set!== 'SNGL'){
            $('#sampleSets').append(createCollapsible('Set ' + set, set));
            for(i=0;i<ls.length;i++){
                if(ls.key(i).match(stationSetContainerRegex)){
                var query = ls.key(i);
                var data = query.split('&');
                if(data[0]===station && data[1] === set){
                $('#set'+set).append(createButton(data[2],'#sampleParametersPage',"getJsonFromLocalStorage('"+station+'&'+set+'&'+data[2]+"')",data[2])).trigger('create');//createButton(set,'#setProperties',"changeSet(this.id)",set));
                }
                }
            }


        }


}

The HTML in witch it is appended:

<div data-role="page" id="HomePage" >
    <div data-role="header" data-position="fixed" >
                <h3 id='HomePageHeader'></h3>
    </div>
    <div data-role="content">
        <div data-collapsed="false" data-content-theme="c" data-iconpos="right" data-role="collapsible" data-theme="a" data-collapsed-icon="plus" data-expanded-icon="minus" >
        <h1>Shipments Manager</h1>
        <div data-role="listview">
        <li><a href="#newSample" data-transition="slide">Add sets or groups</a>
        </li>
        <li><a href="#currentSamplePage" id='currentButton' data-transition="slide">Current</a>
        </li>
        <li><a href="#" data-transition="slide">History</a>
        </li>
        </div>
        </div>
        <div data-role="collapsible" data-collapsed="true" data-content-theme="c"data-collapsed-icon="plus" data-theme="a" data-expanded-icon="minus" data-iconpos="right">
        <h1>Manage Images</h1>
        </div>
        <div data-role="collapsible" data-collapsed="true" data-content-theme="c"data-collapsed-icon="plus" data-theme="a" data-expanded-icon="minus" data-iconpos="right">
        <h1>Tutorials</h1>
        </div>
        </div>
    <div data-role="footer" data-position="fixed">
        <div class="ui-grid-b">
           <div class="ui-block-a"><a href="#" data-icon="arrow-l" data-iconpos="left" data-role="button" data-rel="back" data-direction="reverse">Back</a></div>
           <div class="ui-block-b"><a href="#" data-icon="bars" data-role="button">Menu</a></div>
        </div>
    </div>
    </div>

    <div data-role="page" id="currentSamplePage" >
      <div data-role="header" data-position="fixed">
        <h3>Current Samples</h3>
      </div>
      <div data-role="content">
        <div id='currentSamples'></div>
      </div>
      <div data-role="footer" data-position="fixed">
        <div class="ui-grid-b">
           <div class="ui-block-a"><a href="#" data-icon="arrow-l" data-iconpos="left" data-role="button" data-rel="back" data-direction="reverse">Back</a></div>
           <div class="ui-block-b"><a href="#" data-icon="bars" data-role="button">Menu</a></div>
        </div>
      </div>
    </div>

    <div data-role="page" id="multiSet" >
        <div data-role="header" data-position="fixed">
            <h3>Select a sample set</h3>
        </div>
        <div data-role="content" >
         <div id="sampleSets">
         </div>
        </div>
        <div data-role="footer" data-position="fixed">
             <div class="ui-grid-b">
               <div class="ui-block-a"><a href="#" data-icon="arrow-l" data-iconpos="left" data-role="button" data-rel="back" data-direction="reverse">Back</a></div>
               <div class="ui-block-b"><a href="#" data-icon="bars" data-role="button">Menu</a></div>
               <div class="ui-block-c"><button data-icon="plus" data-iconpos="right" id="addSampleSet" data-theme="a">Add Sample</button></div>
             </div>
        </div>
    </div>

Answer 1

When appending items dynamically to current page or to a page that is already, you need to enhance the items manually to apply JQM styles.

For collapsible widget, call the below after appending items.

$(".selector").collapsible();

Reference: http://api.jquerymobile.com/collapsible/