JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tables"></div>

CSS

table {
    border: solid 1px red;
}

JavaScript

$(function () {
    var tables = [
            // Table #1
            [
                [111, 112, 113], // Row #1
                [121, 122, 123]  // Row #2
            ],
            // Table #2
            [
                [211, 212, 213, 214], // Row #1
                [221, 222, 223, 224], // Row #2
                [231, 232, 233, 234]  // Row #3
            ],
            // Table #3 (empty!)
            []
        ],
        nr, nc, i, j, k,
        name, value, textBox, cell, row, table,
        $tables = $("#tables");
    
    for (i = 0; i < tables.length; ++i) {
        nr = tables[i].length;
        nc = nr > 0 ? tables[i][0].length : 0;
        table = "<table>";
        for (j = 0; j < nr; ++j) {
            row = "<tr>";
            for (k = 0; k < nc; ++k) {
                name = "textBox" + (i + 1) + (j + 1) + (k + 1);
                value = tables[i][j][k];
                textBox = "<input type='text' name='" + name + "' value='" + value + "'>";
                cell = "<td>" + textBox + "</td>";
                row += cell;
            }
            row += "</tr>\n";
            table += row;
        }
        table += "</table>\n";
        $tables.append(table);
    }
});