JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css">
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
<div data-role="page" id="home">
    <div data-role="content">
        
        <h2>List of Questions</h2>
        <ul data-role="listview" data-inset="true" id="theList">
            <li>
                <h3>Question 1 using Radio Options</h3>
                <p><strong>Do you agree?</strong></p>
                <p>Please select an option</p>
                <p class="ui-li-aside">
                    <fieldset data-role="controlgroup" data-type="horizontal">
                        <input type="radio" name="q1" id="q1-agree" value="agree"  />
                        <label for="q1-agree">Agree</label>
                        <input type="radio" name="q1" id="q1-disagree" value="disagree"  />
                        <label for="q1-disagree">Disagree</label>
                    </fieldset>
                </p>
            </li>
            <li>
                <h3>Question 2 using Radio Options</h3>
                <p><strong>Another question</strong></p>
                <p>Please select an answer</p>
                <p class="ui-li-aside">
                    <fieldset data-role="controlgroup" data-type="horizontal">
                        <input type="radio" name="q2" id="q2-agree" value="agree"  />
                        <label for="q2-agree">Agree</label>
                        <input type="radio" name="q2" id="q2-disagree" value="disagree"  />
                        <label for="q2-disagree">Disagree</label>
                    </fieldset>
                </p>
            </li>
            <li>
                <h3>Question 3 using Checkbox Options</h3>
                <p><strong>Do you agree?</strong></p>
                <p>Please tap to select the option</p>
                <p class="ui-li-aside">
                    <fieldset data-role="controlgroup"...

JavaScript

// Add 200 list items
for( i=0; i < 200; i++){
    createListItems(i, 'hello-'+i);
}

// add jQM markup
$('#theList').trigger('create');

// refresh the list
$('#theList').listview('refresh');

function createListItems(number, option) {
    var item = '<li><h3>Question '+number+' using Checkbox Options</h3><p><strong>Do you '+option+'?</strong></p><p>Please select an option</p><p class="ui-li-aside"><fieldset data-role="controlgroup" data-type="horizontal"><input type="checkbox" name="q'+number+'" id="q'+number+'-'+option+'" class="custom" /><label for="q'+number+'-'+option+'">'+option+'</label></fieldset></p></li>';
    
    $('#theList').append(item);
}