JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Home Page -->
<div data-role="page" id="home">
    <div data-role="header" data-theme="a">
        	<h1>Mobile Viewer</h1>

    </div>
    <div data-role="content">
        <ul id="section_list" data-role="listview"></ul>
    </div>
    <div data-role="footer" data-theme="a">
        	<h1>Footer</h1>

    </div>
</div>
<!-- Chapter Page -->
<div data-role="page" id="chapter">
    <div data-role="header" data-position="fixed" data-theme="a">	<a href="#home" data-role="button" data-icon="home" data-iconpos="notext">Home</a>

        	<h1 id="header"></h1> 
    </div>
    <div data-role="content">
        <ul id="content_list" data-role="listview"></ul>
    </div>
    <div data-role="footer" data-theme="a"></div>
</div>

<div data-role="page" id="fav">
	<div data-role="header">
	<h1>Bookmark</h1>
	</div>
	<div data-role="content">
	<ul id="favoritesList" data-inset="true" data-filter="true"></ul>
	</div>
	<div data-role="footer" data-position="fixed">
	<a href="#home" data-icon="icon" data-iconpos="left"></a>
	</div>
</div>

<div data-role="page" id="addToFavoritesDialog">

	<div data-role="header">
		<h1>Add to Favorites?</h1>
	</div>
	<div data-role="content">
	<p>
	<a href="" data-role="button" data-theme="b" class="addToFavoritesButton">Yes!</a>
		<a href="" data-rel="back" data-role="button" class="no">No thank you</a>
	</p>
	</div>

JavaScript

var xml = '<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?> <page count=\"56\" name=\"ebook\"><sections><section count=\"7\" name=\"Seduce Your Partner\" order=\"1\"><content file=\"93828.txt\" order=\"1\">Balmy with rich perfumes</content><content file=\"93829.txt\" order=\"2\">Wear a fine dress</content> <content file=\"93830.txt\" order=\"3\">Welcome to Love Abode</content> <content file=\"93831.txt\" order=\"4\">Rekindle your love</content>      <content file=\"93832.txt\" order=\"5\">Flower a love messanger</content><content file=\"93833.txt\" order=\"6\">Perfumes and Aromas</content>  <content file=\"93834.txt\" order=\"7\">Gain a women&amp;apos;s heart</content></section><section count=\"6\" name="The Touch of Love" order=\"2\"><content file=\"93835.txt\" order=\"8\">A Love Message</content><content file=\"93836.txt\" order=\"9\">An awakening kiss</content><content file=\"93837.txt\" order=\"10\">Heading South with Confidence</content><content file=\"93838.txt\" order=\"11\">Caressing</content><content file=\"93839.txt\" order=\"12\">Stroking</content><content file=\"93840.txt\" order=\"13\">Blows &amp;amp; Cries</content></section><section count=\"8\" name="Beyond Touch" order=\"3\"><content file=\"93841.txt\" order=\"14\">Watch, Listen &amp;amp; Experiment</content><content file=\"93842.txt\" order=\"15\">Blindfolded</content><content file=\"93843.txt\" order=\"16\">Embrace of Jaghana</content><content file=\"93844.txt\" order=\"17\">Piercing Embrace</content><content file=\"93845.txt\" order=\"18\">Twining of a Creeper</content><content file=\"93846.txt\" order=\"19\">Line of Jewels</content><content file=\"93847.txt\" order=\"20\">Token of Remembrance</content><content file=\"93848.txt\" order=\"21\">Oils and Lotions</content></section></sections></page>';

$(xml).find('section').each(function () {
    var section = $(this).attr("name");
    var order = $(this).attr("order");
    var count = $(this).attr("count");

   ...