JSFiddle - React, Tailwind, and code Playground

HTML

<div id = 'tab'></div>

JavaScript

/**
 * Create a Row
 */

var Row = function(){
	this.row = $('<div class = "table-row"/>');
}

Row.prototype.addManyCols = function(cols){
	var self = this;
    $.each(cols, function(i, e){
		self.addCol(e);
	});
    return this.row;
}

Row.prototype.addCol = function(col){
	var column = $('<div class = "table-col"/>');	
	if(col.attr) column.attr(col.attr);	
	if(col.css) column.css(col.css);	
	if(col.html) column.html(col.html);
    this.row.append(column);
}
    
/**
 * Create a table
 */

var Table = function(options){
	this.table = $('<div class = "table-base"/>');
}

Table.prototype.build = function(template, data){
    var self = this;
	var rows = this.dataToTable(template, data);
    $.each(rows, function(i,e){
        self.addRow(e);
    });
    return this.table;
}

/**
 * Merge the template and the data
 * @param {Object} template - The table's template
 * @param {Object} data - The table's data
 * @returns {Object} tableData - The merged template and data
 */

Table.prototype.dataToTable = function(template, data){
    var tableData = {};
    var rowCount = Object.keys(data).length;
    for(i = 0; i < rowCount; i++){
        // Here is the issue. If I use = template
        // then both rows are somehow the same. But 
        // if I inject my layout object directly, it's fine!
        tableData[i] = template;
        $.each(tableData[i], function(k,v){
           v.html = data[i][k];
        });
    }
	return tableData;	
}

Table.prototype.addRow = function(cols){
	var row = new Row().addManyCols(cols);		
	this.table.append(row);
}

Table.prototype.refresh = function(){
	
}

Table.prototype.empty = function(){
	this.table.empty();	
}

Table.prototype.remove = function(){
	this.table.remove();	
}

// Usage:

var myTemplate = {
	col1 : {
        attr : {id : '44'},
        css : {width : '150px'},
        html : ''
    },
    col2 : {
        attr : {id : 1},
        css : {width : '150px'},
        html : ''
    }
}

var myTableData  = {
    0 : {
     ...