I am trying to merge data in row on the basis of date, but I got this

I need the result like this

The columns are generating dynamically. This is logic I tried. Please guide me. Thank you.

var vHtml = '<table id="example_Day" class="table table-hover" cellspacing="0" width="100%">';
vHtml += '<thead>';
vHtml += '<tr id="rowDay">';
vHtml += '<th>Date</th>';
for (var i = 0; i < count; i++) {
    ProductArray.push(Returndata[i]["ShortCode"]);
    DateArray.push(Returndata[i]["DemandDate"]);
    MedIDArray.push(Returndata[i]["MedicineID"]);
}
ProductArray = ProductArray.filter(onlyUnique);
for (var i = 0; i < ProductArray.length; i++) {
    vHtml += '<th>' + ProductArray[i] + '</th>';
}
vHtml += '<th>Paid / Free</th>';
vHtml += '</tr>';
vHtml += '</thead>';
vHtml += '<tbody>';
DateArray = DateArray.filter(onlyUnique);
MedIDArray = MedIDArray.filter(onlyUnique);

for (var j = 0; j < count; j++) {
    vHtml += '<tr>';
    vHtml += '<td>' + Returndata[j]["DemandDate"] + '</td>';

    for (var i = 0; i < MedIDArray.length; i++) {
        if (MedIDArray[i] == Returndata[j]["MedicineID"]){
            vHtml += '<td>' + Returndata[j]["Amount"] + '</td>';
        }
        else
        {
            vHtml += '<td> - </td>';
        }
    }
    vHtml += '<td>' + Returndata[j]["FreeOrPaid"] + '</td>';
    vHtml += '</tr>';
}



vHtml += '</tbody>';
vHtml += '</table>';

$('#table_day').html(vHtml);

1:

2: