JSFiddle - React, Tailwind, and code Playground

by techunter

HTML

<div data-role="page" id="home">
    <div data-role="header" data-position="fixed">
        	<h1 id="title"></h1>

        <div data-role="navbar" class="ui-body-d">
            <ul>
                <li><a href="home" data-icon="home" data-iconpos="left"><i class="icon-cog"></i>Continue</a>
                </li>
                <li><a href="#fav" data-icon="photos">Bookmarks</a>
                </li>
                <li><a href="" rel="external" data-icon="map" class="mapview">Map View</a>
                </li>
            </ul>
        </div>
    </div>
    <div data-role="content" data-transition="slide">
        <ul class="list" id="section_list" data-role="listview" data-filter="true"></ul>
    </div>
    <div id="footer" data-role="footer" data-position="fixed"></div>
</div>
<!-- Favourites page -->
<div data-role="page" id="fav">
    <div data-role="header">
        	<h1>Bookmark</h1>

    </div>
    <div data-role="content" class="ulDiv">
        <ul id="favoritesList" data-inset="true" data-filter="true"></ul>
    </div>
    <div data-role="footer" data-position="fixed">	<a href="#home" data-icon="home" data-iconpos="left" data-iconpos="notext"></a>

    </div>
</div>

JavaScript

var xml = '<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?><page count=\"6\" name=\"ebook\"><sections><section count=\"2\" name=\"Main1\" order=\"1\"><content file=\"sample.txt\" order=\"1\">content1</content><content file=\"sample1.txt\" order=\"2\">content2</content></section><section count=\"2\" name="Main2" order=\"2\"><content file=\"sample2.txt\" order=\"3\">content3</content><content file=\"sample3.txt\" order=\"4\">content4</content></section><section count=\"8\" name="Main3" order=\"3\"><content file=\"sample4.txt\" order=\"5\">content5</content><content file=\"sample5.txt\" order=\"6\">content6</content></section></sections></page>';
var prefix="";
$(xml).find('page').each(function () {
    var title = $(this).attr("name");
    $("#title").text(title);
});
for (order = 1; order < 7; order++) {
    $(xml).find('section').each(function () {
        var section = $(this).attr("name");
        $("#section_list").append('<li data-role="list-divider">' + section + '</li>');
        $(this).children().each(function () {
            var content = $(this).text();
            var order = $(this).attr("order");
            var seq = order + '' + $(this).attr('order');
            var file = $(this).attr('file');
            $("#section_list").append('<li><a href="" class="style1" data-sequence="s' + seq + '" file="' + file + '"><h2>' + content + ' </h2></a></li><div style="border-size:2px;border-style:solid;border-color:transparent;"></div>');
        });
        $("#section_list").listview('refresh');
    });
    break;
}
$("#section_list").on('click', 'a', function () {
    var length = $('#home li a').length;
    $('#home li a').each(function (i) {
        var file = $(this).attr('file');
        //var content = $(this).find('.ui-li-heading').text();
        var seq = $(this).data("sequence");
        if ($('[data-role=page]#' + seq).length === 0) {
            $($.mobile.pageContainer).append('<div data-role="page" id="' + seq + '"...