JSFiddle - React, Tailwind, and code Playground

HTML

<table id="personDataTable" class="table table-bordered">
        <tbody>
            <tr>
                <th>workflow_job_id</th>
                <th>Domain Id</th>
                <th>Entity Id</th>
                <th>Type</th>
                <th>Status</th>
                <th>Task Status</th>

            </tr>
        </tbody>
        </table>

JavaScript

var row=[];
var rowData={
    workflow_job_id:1,
    domain_id:100,
    entity_id:'#1',
    type:'sometype',
    status:true,
    taskstatus:true
    
    
};
function drawRow(rowData) {
    row = $("<tr />")

    $("#personDataTable").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
    row.append($("<td>" + rowData.workflow_job_id + "</td>"));
    row.append($("<td>" + rowData.domain_id + "</td>"));
    row.append($("<td>" + rowData.entity_id + "</td>"));
    row.append($("<td>" + rowData.type + "</td>"));
    row.append($("<td>" + rowData.status + "</td>"));
    row.append($("<td>" + rowData.taskstatus + "</td>"));
}

for( var i=0;i<10;i++){
drawRow(rowData);
}