JQueryMobile - Dynamic Checkboxes from Templates

I am wishing to dynamically add JQuery mobile checkboxes to a control group using the below template:

    <div data-role="main" class="ui-content" id="progress-note-entry-tab">
        <div data-role="collapsible" id="progress-note-entry-type">
            <h1 id="progress-note-entry-type-name"></h1>

            <fieldset data-role="controlgroup" id="progress-note-entry-subtype-list">
                <input id="progress-note-entry-subtype-input" type="checkbox" />
                <label id="progress-note-entry-subtype-label" for="progress-note-entry-subtype-input"></label>
            </fieldset>
        </div>

        <div>
            <textarea id="progress-note-entry-notes"></textarea>
        </div>
    </div>

The associated Javscipt is below:

/**
 * Populates the form for adding a new progress note with the progress note progress_note_types.
 *
 * @param data_progress_note_types {Group[]} the progress note progress_note_types.
 */
function addProgressNoteTypes(data_progress_note_types)
{
    var elem_note_type_original = $('#progress-note-entry-type');
    var elem_note_type_last = elem_note_type_original;

    for (var note_type_index = 0; note_type_index < data_progress_note_types.length; note_type_index++)
    {
        var data_note_type = data_progress_note_types[note_type_index];
        var elem_note_type_new = elem_note_type_original.clone();

        elem_note_type_new.find('.ui-collapsible-heading-toggle').children().unwrap();
        elem_note_type_new.find('.ui-collapsible-heading-status').remove();
        elem_note_type_new.find('.ui-collapsible-content').children().unwrap();
        elem_note_type_new.find('#progress-note-entry-type-name').text(data_note_type.getName());

        var elem_subtype_list = elem_note_type_new.find('#progress-note-entry-subtype-list');
        var elem_input_original = elem_subtype_list.find('#progress-note-entry-subtype-input');
        var elem_label_original = elem_subtype_list.find('#progress-note-entry-subtype-label');

        for (var subtype_index = 0; subtype_index < data_note_type.getLength(); subtype_index++)
        {
            var elem_input_new = elem_input_original.clone();
            var elem_label_new = elem_label_original.clone();
            var id_elem_input_new = 'progress-note-entry-subtype-input' + note_type_index + '-' + subtype_index;

            elem_input_new.attr('id', id_elem_input_new);
            elem_label_new.attr('for', id_elem_input_new);

            elem_subtype_list.append(elem_input_new);
            elem_subtype_list.append(elem_label_new);
        }

        elem_input_original.hide();
        elem_label_original.hide();
        elem_note_type_new.show();
        elem_note_type_last.after(elem_note_type_new);
        elem_note_type_new.collapsible();
        elem_subtype_list.enhanceWithin();
        elem_note_type_last = elem_note_type_new;
    }

    elem_note_type_original.hide();
}

The checkboxes are cloned but the issue is that they are separated instead of being joined together in control groups. Does anyone know of proper way of extending the control group using the existing checkboxes as a template?