JQuery mobile Square/Circular styling - jquery-mobile

Question

In my application I create a few buttons using D3 functions, but when they're displayed they do not have the circular borders like the hard coded buttons do:
"Menu" is hard coded, the other four buttons are from D3 functions
I first thought I had screwed up the classes of the buttons, but they do have the ui-corner-all class:
Why aren't they getting styled correctly? (There is no custom CSS applied besides the red text)
They should look along the lines of these examples:
http://demos.jquerymobile.com/1.4.2/checkboxradio-radio/
Edit:
Here's the D3 function:
this.initialLoad = function(){
//var data= ["First button with some long text in the descriptionnnnnnnnnnnnnnnnnnnnnnnnnnnn", "Second button with some long text in the description"];
console.log("initialLoad");
//Create the header
headerElem = d3.select("#uploadedCompany")
.append("p");
//add the required buttons for selecting the right sheet for the set
var Addedbuttons = d3.select("#TheButtons").selectAll("input")
.data(
function (){
var titlelist = Array();
for (var n = 0; n < numOfSheets; n++){
titlelist[n]= upLoadedData[n].title;
}
return titlelist;
}
)
.enter()
.append('label')
.attr('for',function(d,i){ return 'Statement_a'+i; })
.text(function(d) { return d; })
.append("input")
.attr("type", "radio")
.attr("name","stmntRadio")
.property('checked',function (d,i){if (i===pSI) return true; else return `false;})`
.attr("id", function(d,i) { return i; })
.attr("onClick", "rbStatementClicked(this)");
//make sure that the trendON is false
d3.select("#cbTrendOn").node().checked = false;
updateSheet();
$("#TheButtons").enhanceWithin();
};

Answer 1

I am assuming your #TheButtons DOM element is setup as a controlgroup with data-type="horizontal". In that case you just need to add .controlgroup("refresh") after the enhance within. Also, add the dynamic controls to the .ui-controlgroup-controls DIV within the controlgroup.
var Addedbuttons = d3.select("#TheButtons .ui-controlgroup-controls ").selectAll("input")
.data(data)
.enter()
.append("input")
.attr("type", "radio")
.attr("name","stmntRadio")
.attr("id", function(d,i) { return 'Statement_a'+i; })
.attr("onClick", "rbStatementClicked(this)")
.append('label')
.attr('for',function(d,i){ return 'Statement_a'+i; })
.text(function(d) { return d; })
;
$("#TheButtons").enhanceWithin().controlgroup("refresh");
Here is a DEMO