JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <th>Names</th>
    </tr>
    <tr>
        <th>Costs</th>
    </tr>
    <tr>
        <th>Colors</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 $trs = $('table tr');
var $nameTr = $trs.eq(0);
var $costTr = $trs.eq(1);
var $colorTr = $trs.eq(2);

$.each(ProductsArray, function(idx, item) {
    $('<td />').text(item.Name).appendTo($nameTr);
    $('<td />').text(item.Cost).appendTo($costTr);
    $('<td />').text(item.Color).appendTo($colorTr);
});