JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page" id="page1">
  <div data-role="header">
    <h1>My page</h1>
  </div>
  <div role="main" class="ui-content">
    <h1 id="title">H1 Heading</h1>
    <p id="question">The question</p>
    <fieldset data-role="controlgroup">
    <legend id='steve'>
    test legend
    </legend>
      <div id="poss_ans"></div>
    </fieldset>
  </div>
  <button onclick='add_radio()'>
  Add
  </button>
  <button onclick='delete_radio()'>
  Delete
  </button>
  <div data-role="footer" data-position="fixed">
    <h1>Footer</h1>
  </div>
</div>

JavaScript

var poss_ans = "6,4,8,2,5";
var possibleAnswers = poss_ans.split(","); //poss_ans is string containing all the answer from the database

$(document).on("pagecreate", "#page1", function() {
	add_radio()
  
});

function add_radio(){
var $posans = $('#poss_ans');
  for (var i = 0; i < possibleAnswers.length; i++) {
    var label = possibleAnswers[i];
    $radio = $('<input />', {
      id: 'rad' + i,
      name: 'possibleAnswers',
      type: "radio",
      value: possibleAnswers[i],
    });
    var $label = $('<label />', {
      for: 'rad' + i,
      text: label
    });

    $posans.append($label).append($radio);
  }
  $posans.enhanceWithin().closest("fieldset").controlgroup("refresh");
}

function delete_radio() {
  var $posans = $('#poss_ans');
  $posans.children().remove();
}