JSFiddle - React, Tailwind, and code Playground

HTML

<table id = Table1 align="center" border="1" cellpadding="1" cellspacing="1" style="width:500px">
<div contenteditable="false"><thead> <tr> <th scope="col"><div contenteditable="false">Row Header 1<div></th> <th scope="col">Row Header 2</th> <th scope="col">Row Header 3</th> </tr> </thead></div>
<caption>Table1 with Row Header</caption>
    <tr><td><div contenteditable>&nbsp;</div></td><td><div contenteditable>&nbsp;</div></td><td><div contenteditable>&nbsp;</div></td></tr>
<tr><td><div contenteditable>&nbsp;</div></td><td><div contenteditable>&nbsp;</div></td><td><div contenteditable>&nbsp;</div></td></tr>
<tr><td><div contenteditable>&nbsp;</div>/td><td><div contenteditable>&nbsp;</div></td><td><div contenteditable>&nbsp;</div></td></tr>
</table></div> <p>&nbsp;</p>

<div contenteditable>    
<table id = Table2 align="center" border="1" cellpadding="1" cellspacing="1" style="width:500px">
<div contenteditable="false"><thead> <tr> <th scope="col"><div contenteditable="false">Row Header 1<div></th> <th scope="col">Row Header 2</th> <th scope="col">Row Header 3</th> </tr> </thead></div>
<caption>Table2 with Row Header</caption>
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
</table></div> <p>&nbsp;</p>

JavaScript

$(document).ready(function() {
 	//$("#Table1").children().children().eq(1).children().eq(0).text("123");
    //$("#Table1").children().children().eq(1).children().eq(1).text("456");
    //$("#Table1").children().children().eq(1).children().eq(2).text("789");
    $("#Table1").children().children().eq(2).children().eq(0).text("abc");
    $("#Table1").children().children().eq(2).children().eq(1).text("def");
    $("#Table1").children().children().eq(2).children().eq(2).text("ghi");
    $("#Table1").children().children().eq(3).children().eq(0).text("do");
    $("#Table1").children().children().eq(3).children().eq(1).text("re");
    $("#Table1").children().children().eq(3).children().eq(2).text("mi");
    
 $("#Table2").children().children().eq(0).children().eq(0).attr("contenteditable", false);
    $("#Table2").children().children().eq(0).children().eq(1).attr("readonly", true);
    $("#Table2").children().children().eq(0).children().eq(2).attr("readonly", true);
 	$("#Table2").children().children().eq(1).children().eq(0).text("123");
    $("#Table2").children().children().eq(1).children().eq(1).text("456");
    $("#Table2").children().children().eq(1).children().eq(2).text("789");
    $("#Table2").children().children().eq(2).children().eq(0).text("abc");
    $("#Table2").children().children().eq(2).children().eq(1).text("def");
    $("#Table2").children().children().eq(2).children().eq(2).text("ghi");
    $("#Table2").children().children().eq(3).children().eq(0).text("do");
    $("#Table2").children().children().eq(3).children().eq(1).text("re");
    $("#Table2").children().children().eq(3).children().eq(2).text("mi");
    
})