JSFiddle - React, Tailwind, and code Playground

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>';
$(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 + '" class="items"><div...