JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr class="name">
        <th>Name</th>
    </tr>
    <tr class="cost">
        <th>Cost</th>
    </tr>
    <tr class="color">
        <th>Color</th>
    </tr>
</table>

JavaScript

function Product() {
    this.Name = "";
    this.Cost = "";
    this.Color = "";
}

var ProductsArray = [];

var product1 = new Product();
product1.Name = "Name1";
product1.Cost = "Cost1";
product1.Color = "Color1";

var product2 = new Product();
product2.Name = "Name2";
product2.Cost = "Cost2";
product2.Color = "Color2";

var product3 = new Product();
product3.Name = "Name3";
product3.Cost = "Cost3";
product3.Color = "Color3";

ProductsArray.push(product1);
ProductsArray.push(product2);
ProductsArray.push(product3);

var nameHtml = "";
var costHtml = "";
var colorHtml = "";

// Building strings
for (var i = 0; i < ProductsArray.length; i++) {
    nameHtml += "<td>" + ProductsArray[i].Name + "</td>";
    costHtml += "<td>" + ProductsArray[i].Cost + "</td>";
    colorHtml += "<td>" + ProductsArray[i].Color + "</td>";
}

// Adding to rows
$(".name").append(nameHtml);
$(".cost").append(costHtml);
$(".color").append(colorHtml);