JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainContainer">
    <table border="1" cellpadding="1" cellspacing="1" id="mainTable">
        <tbody></tbody>
    </table>
</div>
<div id="defaultButtons">
    <input type="text" class="allCells" maxlength="1" />
</div>
<div id="formContainer">
    <form action="evaluate.php" method="post">
        <input type="hidden" name="a_row" value="" id="a_row" />
        <input type="hidden" name="b_row" value="" id="b_row" />
        <input type="hidden" name="c_row" value="" id="c_row" />
        <input type="hidden" name="d_row" value="" id="d_row" />
        <input type="hidden" name="e_row" value="" id="e_row" />
        <input type="hidden" name="f_row" value="" id="f_row" />
        <input type="hidden" name="g_row" value="" id="g_row" />
        <input type="hidden" name="h_row" value="" id="h_row" />
        <input type="hidden" name="i_row" value="" id="i_row" />
        <button type="button" onClick="populateAllHidden()">Evaluate!</button>
    </form>
</div>

CSS

#defaultButtons {
    display: none;
}
.allCells {
    width: 10px;
}

JavaScript

function initGrid() {
    var table = document.getElementById("mainTable").getElementsByTagName("tbody")[0];
    var atts = ["a", "b", "c", "d", "e", "f", "g", "h", "i"];
    for (var i = 0; i < atts.length; i++) {
        var newRow = table.insertRow(i);
        for (var j = 0; j < 9; j++) {
            var newCell = newRow.insertCell(j);
            newCell.innerHTML = document.getElementById("defaultButtons").innerHTML;
            newCell.setAttribute("name", atts[i] + j);
            newCell.setAttribute("id", atts[i] + j);
            newCell.setAttribute("value", "");
            newCell.setAttribute("onKeyUp", "appendData(this.id, this)");
        }
    }
}

function populateAllHidden() {
    var atts = ["a", "b", "c", "d", "e", "f", "g", "h", "i"];
    for (var i = 0; i < atts.length; i++) {
        var currRow = document.getElementById(atts[i] + "_row");
        for (var j = 0; j < 9; j++) {
            if (j === 0) {
                currRow.value = document.getElementById(atts[i] + j).innerText + ",";
            } else if (j != 8) {
                currRow.value += document.getElementById(atts[i] + j).innerText + ",";
            } else {
                currRow.value += document.getElementById(atts[i] + j).innerText;
            }
        }
    }
    alert(document.getElementById("a_row").value);
}

function appendData(id, val) {
    document.getElementById(id).value = val;
    alert(document.getElementById(id).value);
}

window.onload = function () {
    initGrid();
};