JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div data-role='page' id='mainPage'>
    <div data-role='header'>
        <h1>Main Page</h1>        
    </div>

    <div data-role='content'>
        <div data-role='fieldcontain' data-enhance='false' id='fieldContainer'>                
            <fieldset data-role='controlgroup'>
                <legend>Ye Olde Legend</legend>
                <!-- ko foreach: children -->
                    <input type='radio' name='childRadio' data-bind='value: name, checked: $root.selectedName, attr: { id: "cb_" + $index() }' />
                    <label data-bind='attr: { for: "cb_" + $index() }, text: name'></label>
                <!-- /ko -->                
            </fieldset>
        </div>
        <div>
            viewModel.selectedName: <span data-bind='text: selectedName'></span>            
        </div>
    </div>
    
</div>

JavaScript

var viewModel = {
    
    children: [
            { name: 'child 1', notes: ko.observable('') },
            { name: 'child 2', notes: ko.observable('') },
            { name: 'child 3', notes: ko.observable('') },
            { name: 'child 4', notes: ko.observable('') },
            { name: 'child 5', notes: ko.observable('') }
        ],
    selectedName: ko.observable('child 1')
};

$(document).on('pagebeforeshow', '#mainPage', function () {
    ko.applyBindings(viewModel, $('#mainPage')[0]);
    
    window.setTimeout(function() {
        $('#fieldContainer').removeAttr('data-enhance');
        $('#fieldContainer').trigger('create');
    }, 500);
});