JSFiddle - React, Tailwind, and code Playground

HTML

<table id="tables" cellspacing="50px" style="margin-top:70px">
        <tbody>
        </tbody>
   </table>

CSS

.clock-day {
    font-size: 3em;
    font-weight: bold;
}

.clock-time {
    font-size: 1.2em;
}

#tables {
    margin: 70px auto 0 auto;
    border-collapse: collapse;
}
#tables td {
    text-align: center;
    background: url(images/green.png);
    width:  150px;
    height: 150px; /* tables/cells sometimes don't like height given to them */
    border: 1px solid black;
}

JavaScript

$(function() {
    var rows = 2;
    var $tbody = $('#tables > tbody');
    for (var j = 1; j <= rows; j++) {
        var $row = $("<tr id='row" + j + "'>");
        $tbody.append($row);
        for (var k = 1; k <= 5; k++) {
            $row.append(
                "<td id='table" + k + "' class='button' onclick='printBill(" + k + ")'>"
              +   "<div class='clock-day'>" + k + "</div>"
              +   "<div class='clock-time' id='clock" + k + "'> 0:0:0 </div>"
              + "</td>"
            );
        }
    }
});