Programatically changes jQuery Mobile’s Collapsible sets

Question

I have a collapsible sets with 7 elements. It works fine. When I try to change the header of the each collapsible items, it changes the header but removes the collapsible styles.

Did someone come across such issues??

please find my code below.

jQuery

$('#MonColHead').text("Monday "+pad2((dateArray[0].getMonth()+1))+"-"+pad2(dateArray[0].getDate()));
$('#collapReadOnlyProj').selectmenu('refresh');

The html

<div data-role="collapsible-set" id="collapReadOnlyProj">

        <div data-role="collapsible">
        <h3 id="MonColHead">Monday</h3>
            <table align="center">
                <tr><th>Hours</th><th>Minutes</th></tr>
                <tr><td><input type="number" name="name" id="name" value=""  /> </td><td><input type="number" name="name" id="name" value=""  /></td></tr>
            </table>

            <div data-role="fieldcontain">
            <label for="textarea">External Notes</label>
                <textarea name="textarea" id="textarea" style="min-height:120px"></textarea>
            </div>  
            <div data-role="fieldcontain">
            <label for="textarea">Internal Notes</label>
                <textarea name="textarea" id="textarea" style="min-height:120px"></textarea>
            </div>  
        </div>


        <div data-role="collapsible">
        <h3 id="SunColHead">Sunday</h3>
            <table align="center">
                <tr><th>Hours</th><th>Minutes</th></tr>
                <tr><td><input type="number" name="name" id="name" value=""  /> </td><td><input type="number" name="name" id="name" value=""  /></td></tr>
            </table>

            <div data-role="fieldcontain">
            <label for="textarea">External Notes</label>
                <textarea name="textarea" id="textarea" style="min-height:120px"></textarea>
            </div>  
            <div data-role="fieldcontain">
            <label for="textarea">Internal Notes</label>
                <textarea name="textarea" id="textarea" style="min-height:120px"></textarea>
            </div>  
        </div>

    </div>

Answer 1

Instead of

$('#MonColHead').text("Monday "+pad2((dateArray[0].getMonth()+1))+"-"+pad2(dateArray[0].getDate()));
$('#collapReadOnlyProj').selectmenu('refresh');

try this

$('#MonColHead .ui-btn-text').text("Monday "+pad2((dateArray[0].getMonth()+1))+"-"+pad2(dateArray[0].getDate()));