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">Table 1</li>
<li>
<a href="#bar" id="1">
<table style="width:100%" class="ui-responsive table-stroke" id="table_one">
<tbody>
<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>
<li data-role="list-divider">Table 2</li>
<li>
<a href="#bar" id="1">
<table style="width:100%" class="ui-responsive table-stroke" id="table_two">
<tbody>
<tr>
<th>Header1</th>
<td>data1</td>
</tr>
<tr>
<th>Header2</th>
<td>2</td>
</tr>
<tr>
<th>Header3</th>
<td>data 8M</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" ...
JavaScript
$(document).on("click", "#homelist li", function() {
var tdtext = "";
var thislitable = $(this).closest("li").find("table").attr("id");
$("#"+thislitable).find('td').each(function(i, el) {
var thead = $(el).closest("tr").find("th").text()
var tdis = $(el).text()
tdtext += thead + "==" + tdis + " - ";
})
alert("Table id is: -- "+thislitable +" -- "+ tdtext)
})