JSFiddle - React, Tailwind, and code Playground

by techsin

HTML

<div data-role="page" id="details-pageCus" style="text-transform: none; ">
    <div data-role="header" data-position="fixed">
         <h1>Customer Details</h1>

    </div>
    <div data-role="content">
        <ul data-role="listview" id="ul-stageCus" data-divider-theme="a" data-inset="true"></ul>
        <div id="ul-CustTypeDisplay"></div>
    </div>
</div>

JavaScript

var type = "Contractor";

$("#ul-CustTypeDisplay").empty();
$("#ul-CustTypeDisplay").append('\
     	<fieldset data-role="controlgroup" id="foobar1">\
    	<legend>Customer Category:</legend>\
        <input type="radio" name="CustCat" id="Architect" value="Architect" />\
        <label for="Architect">Architect</label>\
        <input type="radio" name="CustCat" id="Consultant" value="Consultant" />\
        <label for="Consultant">Consultant</label>\
        <input type="radio" name="CustCat" id="Contractor" value="Contractor" />\
        <label for="Contractor">Contractor</label>\
        <input type="radio" name="CustCat" id="ProjectOwner" value="Project Owner" />\
        <label for="ProjectOwner">Project Owner</label>\
        <input type="radio" name="CustCat" id="TradingHouse" value="Trading House"  />\
        <label for="TradingHouse">Trading House</label>\
        <input type="radio" name="CustCat" id="Others" value="Others"   />\
        <label for="Others">Others</label>\
        </fieldset>');
$("#ul-CustTypeDisplay").enhanceWithin();

var inputs = $('input[name=CustCat]');
console.log(inputs.filter('[value=' + type + ']').first());
inputs.filter('[value=' + type + ']').first().attr('checked', true).siblings('label').removeClass('ui-radio-off').addClass('ui-radio-on');