Losing styling on dynamic jquery mobile panel's collapsible div

Question

I'm opening a new page by clicking on a list item that appends data to a collapsible div inside an external panel. The first I open it, the styling stays on the collapsible div but if I go back and try to open another item, the styling is gone but the data is there. I feel like I've tried everything by adding methods like create, refresh, enhancedwithin and have had no luck. Any ideas??

Java Script:

$(document).on('click', '#results li ', function(){  
$("#barHours").empty();
$("#barHours").append('<h3>Hours: </h3>');
$("#barHours").append('Monday: ' + ($(this).data('monday-hours')) + '<br>');
$("#barHours").append('Tuesday: ' + ($(this).data('tuesday-hours')) + '<br>');
$("#barHours").append('Wednesday: ' + ($(this).data('wednesday-hours')) + '<br>');
$("#barHours").append('Thursday: ' + ($(this).data('thursday-hours')) + '<br>');
$("#barHours").append('Friday: ' + ($(this).data('friday-hours')) + '<br>');
$("#barHours").append('Saturday: ' + ($(this).data('saturday-hours')) + '<br>');
});

HTML

<div data-role="panel" id="panel" data-position="right" data-display="overlay" data-theme="b">
        <div data-role="content">
            <div data-role="collapsible" data-inset="true" id="barHours">
            </div>
        </div>
    </div>

Answer 1

An easy way to do this is to call the destroy method before updating the collapsible, then reinitialize it at the end:

    $("#barHours").collapsible( "destroy" ); //destroy the widget
    $("#barHours").empty();
    $("#barHours").append('<h3>Hours: </h3>');
    $("#barHours").append('Monday: 8-5<br>');
    $("#barHours").append('Tuesday: 8-5<br>');
    $("#barHours").append('Wednesday: 8-5<br>');
    $("#barHours").append('Thursday:8-5 <br>');
    $("#barHours").append('Friday: 8-5<br>');
    $("#barHours").append('Saturday: 10-10<br>');

    $("#barHours").collapsible(); //reinitialize the widget