JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container"></div>
CSS
.gblock { display: block; margin-bottom: 5px; }
.radio-option:after {
content: ' - ';
}
JavaScript
var data = {
msg: [{
"ID": "9",
"Name": "Zone 1 Standard",
"Charge": "23.00"
}, {
"ID": "11",
"Name": "Zone 1 FedEx",
"Charge": "37.00"
}, {
"ID": "10",
"Name": "Zone 1 Express",
"Charge": "44.50"
}]
};
var radios = data.msg.map(function(datum) {
var label = $('<label>').addClass('ui-option gblock').text(datum.Name + ' $' + datum.Charge),
input = $('<input>').attr({
type: 'radio',
name: 'ShippingMethod',
value: datum.ID
}),
span = $('<span>').addClass('radio-option');
return label.prepend(input, span);
});
$('#container').append(radios);