JSFiddle - React, Tailwind, and code Playground

HTML

<table id="events">
        <tr>
            <th>Canvas</th>
        </tr>
    </table>

JavaScript

for (var i = 0; i < 3; i++) {
    var canvas = $('<canvas />').attr({
        id: "canvas" + i,
        width: 20,
        height: 20
    });
    
    var ctx = $(canvas)[0].getContext('2d');
    ctx.fillStyle = "#000";
    ctx.fillRect(0, 0, 20, 20);
    $("<tr><td></td></tr>").appendTo( '#events' ).find( 'td' ).append( canvas );
}