JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="myDiv">
<table>
<tr>
<th>title 1</th>
<td>para 1-1</td>
</tr>
</table>
<table>
<tr>
<th>title 2</th>
<td>para 2-1</td>
<td>para 2-2</td>
<td>para 2-3</td>
</tr>
</table>
<table>
<tr>
<th>title 3</th>
<td>para 3-1</td>
<td>para 3-2</td>
</tr>
</table>
</div>
<br>
<pre>
<div id="jsonOut">
</div>
</pre>
JavaScript
$(document).ready(function() {
myHTML = $('#myDiv').html();
});
var tableNumber = $('#myDiv').children('table').length;
var items = [];
for (i = 0; i < tableNumber; i++) {
var title = $($("table tr th")[i]).html();
var paras = [];
$($("table tr")[i]).find('td').each(function() {
paras.push($(this).html());
});
items.push(title,paras);
}
var outPut = JSON.stringify(items);
$('#jsonOut').html(outPut);