JSFiddle - React, Tailwind, and code Playground

by Rejith R Krishnan

HTML

<div id="content"></div>

CSS

td{
    vertical-align:top;
}
table, th, td {
   border: 1px solid black;
}

JavaScript

obj = [{
      "feeding_id": 14,
      "supp_name": "Test 1",
      "supp_weight": 20000,
    }, {
      "feeding_id": 14,
      "supp_name": "Test 2",
      "supp_weight": 1000,
    }, {
      "feeding_id": 12,
      "supp_name": "Test 1",
      "supp_weight": 4664,
    }, {
      "feeding_id": 12,
      "supp_name": "Test 2",
      "supp_weight": 2332,
    }];
$('#content').append($("<table>"));

$.each(obj,function(i, eachVal){
    if( $('tr#feeding_' + eachVal.feeding_id ).length == 0 ){
        var $html = $("<tr></tr>",{
                'id' : 'feeding_' + eachVal.feeding_id,
            });
        $html.append($("<td></td>",{'text':eachVal.feeding_id}));
        $html.append($("<td></td>",{'text':eachVal.supp_name}));
        $html.append($("<td></td>",{'text':eachVal.supp_name}));
        $('#content').find('table').append($html);
    } else {
        var nameRow = $('tr#feeding_' + eachVal.feeding_id ).find('td').eq(1);
        var weightRow = $('tr#feeding_' + eachVal.feeding_id ).find('td').eq(2);
        nameRow.html(nameRow.html() + "<br/>" + eachVal.supp_name)
        weightRow.html(weightRow.html() + "<br/>" + eachVal.supp_weight)
    }
});