JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cart"></div>

JavaScript

var ShoppingCart = {
    Id: 1,
    ShoppingCartItems: [{
        ProductID: "9",
        Quantity: "2",
        Price: "68.40",
        Name: "Cake",
        Date: "2014-05-30",
        StoreID: "1",
        UserID: "1"
    }, {
        ProductID: "7",
        Quantity: "1",
        Price: "11.40",
        Name: "Donut",
        Date: "2014-05-30",
        StoreID: "1",
        UserID: "1"
    }]
};

var ItemsByDate = new Array();
$.each(ShoppingCart.ShoppingCartItems, function (i, Productos) {
    var pushNewItem = true;
    for (var index = 0; index < ItemsByDate.length; index++)
    {
        dateGroup = ItemsByDate[index];
        if (dateGroup.Date && dateGroup.Date == Productos.Date) {
            dateGroup.Items.push(Productos);
            pushNewItem = false;
        } else {
            
            pushNewItem = true;
        }
    }
    if (pushNewItem) {
        ItemsByDate.push({
                Date : Productos.Date, Items : [Productos]
            });
    }
});

$.each(ShoppingCart.ShoppingCartItems, function (i, Productos) {
    $(".cart").append("\
   <tr style='background-color: #F1F1F1; border-bottom: 3px solid #fff;'>\
   <td style='width: 10%;'>" + Number(Productos.Quantity) + "</td>\
   <td style='width: 33%'>" + Productos.Name + "</td>\
   <td style='width: 33%'>" + (Productos.Date || 'N/A') + "</td>\
   <td style='width: 20%'>" + Productos.Price + "</td>\
                        </tr>");
});