JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li><span class="label">Rotate: </span><span class="value" id="rotate"></span></li>
<li><span class="label">Translate X: </span><span class="value" id="translateX"></span></li>
<li><span class="label">Translate Y: </span><span class="value" id="translateY"></span></li>
<li><span class="label">Scale: </span><span class="value" id="scale"></span></li>
</ul>

<h2>Matrix</h2>
<table id="matrix">
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
</table>

CSS

#h2{
    margin-left:auto;
    margin-right:auto;
}

JavaScript

$("#translateX").text("10");

    $("#matrix").find("td").each(function(index, element) {
        $(element).text(index);
    });