JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page"  id="home"> 
		<div data-role="header"  data-position="fixed" class="header_top" data-fullscreen="false">
				<h1>Example Client</h1>
 
				 
		</div> 
		<div data-role="content">
		<!-- Navigation Bar that Once in Horizonal Menu-->
		  <ul data-role="listview" data-inset="true" id="homelist" data-theme="a">
              <li data-role="list-divider">Divider Heade 1</li>
			<li>
			<a href="#bar"  id="1">
			<table style="width:100%"  class="ui-responsive table-stroke"  id="table_one">
			<tbody  id="tablebody">
			<tr>
			<th>Header1</th>
			<td>data1</td>
			</tr>
			
			<tr>
			<th>Header2</th>
			<td>2</td>
			</tr>
			
			<tr>
			<th>Header3</th>
			<td>data 3M</td>
			</tr>
			
			<tr>
			<th>Header4</th>
                <td>  Data4</td>
			</tr>
			
			<tr>
                <th>Header5th </th>
                <td>Data5 </td>
			</tr>
			
			</tbody>
			</table>
			</a>
			</li>
</ul>		
		</div> 
		<div data-role="footer"  data-position="fixed" data-fullscreen="false">
		<h4>Powered by jQuery Mobile</h4>
		</div> 
</div> 


<!-- Start of second page -->
<div data-role="page" id="bar">

	<div data-role="header"  data-position="fixed">
	<a href="#home" class="ui-btn ui-icon-back ui-btn-icon-notext ui-corner-all ui-btn-left">No text</a>

		<h1>Detail Page</h1>
	</div><!-- /header -->

	<div role="main" class="ui-content">
		
		
		<table style="width:100%"  class="ui-responsive table-stroke">
		
		
			<tr>
			<th>Header1</th>
			<td>Data1</td>
			</tr>
			<tr>
			<th>Header2</th>
			<td>Data2</td>
			</tr>
			
			<tr>
			<th>Header3</th>
			<td>Data3</td>
			</tr>
			<tr>
			<th>hEADER4</th>
			<td>Data4</td>
			</tr>
			<tr>
			<th>Header5</th>
			<td>Data5</td>
			</tr>
			<tr>
			<th>Header 6</th>
			<td>Data 6</td>
			</tr>
			
			
			<tr>
			<th>Header 7</th>
			<td>Data 7</td>
			</tr>
			
			<tr>
			<th>Header 8</th>
			<td>Data 8</td>
			</tr>
			
			<tr>
			<th>Header 9</th>
			<td>Data...

JavaScript

$(document).on('pagebeforeshow', '#home', function(){       
    $('#homelist li a').each(function(){
        
		var elementID = $(this).attr('id');
		
		var rowID = $(this).children().attr('id');
		console.log("Table id is"+ rowID);
		 
		 
		
        $(document).on('click', '#'+elementID, function(event){  
            if(event.handled !== true) 
            {
			    
			
                 //  //This will prevent event triggering more then once Save li id into an object, localstorage can also be used, find more about it here: http://stackoverflow.com/questions/14468659/jquery-mobile-document-ready-vs-page-events
                		console.log("Table id is"+ rowID);
				var table = $("#rowId");		
		if(typeof table === 'undefined'){
							// your code here.
			console.log('Table is nulll')
		}else{
		console.log('Table is Valide')
		};	
		
		

		 table.find('tr').each(function (i) {
        var $tds = $(this).find('td'),
            rowValue = $tds.eq(0).text();
           
        // do something with productId, product, Quantity
        alert('Row ' + (i + 1) + ':\nId: ' + rowValue
              );
    });
							
				 
				$.mobile.changePage( "#bar", { transition: "slide"} );
				
                event.handled = true;
            }              
        });
    });
});