How do I inject radio elements into the panel?

I am trying to do a dynamic injection into the panel. I'm not sure if this problem is because the panel is hidden when I call this function or if I am injecting the data properly.

The control group I am targeting is in the panel - hidden when I run this function it updates the values but becomes frozen and unusable even though it is identical to a working model I have locally. The radio group somehow remains locked on the first radio element and I am unable to change the value on click after I run this function.

It is in the sidepanel [filter] > https://jsbin.com/gugepeboci/edit?html,js,output

HTML (jQuery Mobile changes this structure on page and wraps radio elements in .ui-controlgroup-controls)

<fieldset id="colour-radio-group" data-role="controlgroup" data-mini="true" data-iconpos="right">
    <legend></legend>
        <input type="radio" name="colour-choice" id="radio-choice-5" value="Any Colour" checked="checked">
        <label for="choice-1">Any Colour</label>
        <input type="radio" name="colour-choice" id="radio-choice-6" value="orange">
        <label for="choice-2">Green</label>
        <input type="radio" name="colour-choice" id="radio-choice-7" value="yellow">
        <label for="choice-3">Orange</label>
        <input type="radio" name="colour-choice" id="radio-choice-8" value="violet">
        <label for="choice-4">Purple</label>
</fieldset>

Javascript and jQuery

 // Data to be inserted
 var myArray = ["red", "blue", "black"];

 //Empty radio group for new data
 $("#colour-radio-group .ui-controlgroup-controls").empty();

 // Loop array and add data dynamically
 for (var x = 0; x < myArray.length; x++) {

     var index = x + 2;

     if (x == 0) {

         // inject default
         $(`<div class="ui-radio ui-mini">
               <label for="colour-choice-1" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-right ui-radio-on ui-first-child">Any Colour</label>
               <input type="radio" name="colour-choice" id="colour-choice-1" value="default" checked="checked" data-cacheval="false">
            </div>`).appendTo('#colour-radio-group .ui-controlgroup-controls');

     }

     // inject data
     $(`<div class="ui-radio ui-mini">
           <label for="colour-choice-` + index + `" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-right ui-radio-off">`+ myArray[x] +`</label>
           <input type="radio" name="colour-choice" id="colour-choice-` + index + `" value="` + myArray[x] + `" data-cacheval="false">
        </div>`).appendTo('#colour-radio-group .ui-controlgroup-controls');

 }

// fix UI problem
$('#colour-radio-group .ui-controlgroup-controls').children().last().children('label').addClass('ui-last-child');

I have kind of just winged this problem and kept digging myself a hole, any advice?

Solution

Only add plain-html (instead of jquery-mobile stuff).

And trigger create to #colour-radio-group does the job.

https://jsbin.com/nijezovali/1/edit?html,js,output

Edit: if you want, you can add jquery mobile stuff.

$('#colour-radio-group .ui-controlgroup-controls').trigger("create");

is enough.