Dynamically appending listview with XML loses jQuery mobile styling

I have a hybrid application that allows you to select an ID from a list and when search is clicked it should retrieve all associated notes and append them into the listview "my-list".

So far, I have no issues getting and displaying the data but it will not display as it should using JQuery mobile.

SCRIPT:

<script>  
function OnSuccess(xml) {  
    var output = '';  
    $(xml).find("Note").each(  
    function () {  
    output += '<li data-role="collapsible" data-iconpos="right" style="padding:0"'  
    output += '<h2>' + $(this).find("TITLE").text() + '</h2>'  
    output += '<ul data-role="listview">'  
    output += '<li>ID: ' + $(this).find("ID").text()
    output += 'Type: ' + $(this).find("TYPE").text()
    output += 'By: ' + $(this).find("PUBLISHER").text()
    output += 'Date: ' + $(this).find("DATE").text()
    output += '</li> </ul> </li>'
    });

    $('#my-List').html(output);
    }
}
</script>

I simply wish to append "my-list" as I am already doing but why isn't my jQuery collapsible list working?

Thanks!