JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid" id="table">
    <table id="myTable" cellpadding="0" cellspacing="0"></table>
</div>
<div id="datepicker" class="grid"></div>

CSS

#datepicker {
    font-size: 0.6em;
}
#myTable {
    border-collapse:collapse;
}
#myTable td {
    border: 1px solid black;
    padding: 2px;
    margin: 0px;
    min-width: 40px;
}
.grid {
    display: inline-block;
    float: left;
}
#table {
    width: 220px;
}

JavaScript

$(document).ready(function ($) {

    $('#datepicker').datepicker({
        onSelect: function (dateText) {
            var myDate = new Date(dateText);
            myDate.setDate(myDate.getDate() - 1);

            updateRows(myDate);
        }
    });
    
    updateRows(new Date());
});

function updateRows(myDate) {
    var table = $("#myTable");

    var rowTmpl = '<tr><td>{DATE}</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>';
    var rows = [];

    for (var i = 0; i < 16; i++) {
        var row = rowTmpl.replace('{DATE}', myDate.getDate() + "/" + (myDate.getMonth() + 1) + "/" + myDate.getFullYear());
        myDate.setDate(myDate.getDate() + 1)
        rows.push(row);
    }

    table.html(rows.join(''));
}