JSFiddle - React, Tailwind, and code Playground

HTML

<table id="tbl-product">
   <tr>
         <th>product</th>
         <th>date</th>
         <th>quantity</th>
         <th>cost</th>
    </tr>
 </table>

JavaScript

var data = [{
"id":"11",
"user_id":"8000",
"product":"Shoes A",
"quantity":"1",
"open":"2015-01-04",
"date":"2015-01-04",
"cost":"3000"
},

{
"id":"12",
"user_id":"8000",
"product":"Shoes B",
"quantity":"1",
"open":"2015-01-04",
"date":"2015-03-01",
"cost":"1500"
}];

$(function(){
  var qty = 0,
  total = 0;

$.each(data, function(i, row) {
  var productname = row.product;
  var productico = productname.replace(/\s+/g, "-") + '.png';
  var productcost = row.cost;
  var str = '<tr>';
  str += '<td>' + '<img class="product_icon" src="images/products/icon-' + productico + '">' + '<div class="productname">' + productname + '</div></td>';
  str += '<td><div class="textinfo ">' + row.date + '<br/><span class="date">' + row.open + '</span></div> </td>';
  str += '<td><span class="textinfo">' + row.quantity + '</span></td>';
  str += '<td><span class="textinfo">' + productcost + '</td>';
  str += '</tr>';
  if (!isNaN(row.quantity))
    qty += parseFloat(row.quantity);
  if (!isNaN(productcost))
    total += parseFloat(productcost);

  $('#tbl-product').append(str);
});
$('#tbl-product').append('<tr><td colspan="2">Total</td><td>' + qty + '</td><td>' + total.toFixed(2) + '</td></tr>');
  
});