JSFiddle - React, Tailwind, and code Playground

by gopijsf

HTML

<div data-role="page" id="parentPage">
			<header data-role="header" data-theme="d">
				<h3>Parent</h3>
			</header>
			<div>				
				<ul id="sectionUlContainer" data-role="listview">
					<li><a href="#" class="sectionItemClass">List1</a></li>
					<li><a href="#" class="sectionItemClass">List2</a></li>
					<li><a href="#" class="sectionItemClass">List3</a></li>
					<li><a href="#" class="sectionItemClass">List4</a></li>
				</ul>
			</div>
			<footer data-role="footer" data-position="fixed" data-theme="b">
				<h3></h3>
			</footer>
		</div>
		
		<div data-role="page" id="childPage">
			<header data-role="header" data-theme="d">
				<h3>Child</h3>
				<a href="#parentPage">Back</a>
			</header>
			<div id="childList"></div>
		</div>

JavaScript

$(document).ready(function(){
	$('.sectionItemClass').click(function(){
        var childWidget = '<ul id="childUlContainer" data-role="listview"><li>childList</li></ul>';
		$('#childList').html(childWidget);
		$.mobile.changePage('#childPage',{transition:'slide'});
	});
			});