Use jQuery to group JSON data coming from Ajax – Jquery ajax

Consider the following.

$(function() {
  var resultData = [{
      "tbl": "1",
      "orid": "915",
      "date": "2021-12-30 12:46:48",
      "flag": 0
    },
    {
      "tbl": "2",
      "orid": "914",
      "date": "2021-12-30 12:46:21",
      "flag": 0
    },
    {
      "tbl": "3",
      "orid": "913",
      "date": "2021-12-30 12:45:00",
      "flag": 0
    },
    {
      "tbl": "1",
      "orid": "911",
      "date": "2021-12-30 12:27:17",
      "flag": 1
    }
  ];

  function makeNewTable(tableData, target) {
    if (tableData == undefined || target == undefined) {
      return false;
    }
    var tableId = tableData.tbl;
    var table = $("<div>", {
      id: "table-" + tableId,
      class: "table"
    }).appendTo(target);
    $("<div>", {
      class: "header"
    }).html("Ref " + tableId).appendTo(table);
    $("<div>", {
      class: "order"
    }).data("orid", tableData.orid).html(tableData.date).appendTo(table);
    $("<input>", {
      type: "checkbox",
    }).prop({
      checked: tableData.flag == 1 ? true : false,
      disabled: true
    }).appendTo(table);
  };

  function updateTable(newData, target) {
    if (newData == undefined || target == undefined) {
      return false;
    }
    $("<div>", {
      class: "order"
    }).data("orid", newData.orid).html(newData.date).appendTo(target);
    $("<input>", {
      type: "checkbox",
    }).prop({
      checked: newData.flag == 1 ? true : false,
      disabled: true
    }).appendTo(target);
  }

  function showData(data, target) {
    if (data == undefined || target == undefined) {
      return false;
    }
    var tbl;
    $.each(data, function(index, row) {
      if ($("#table-" + row.tbl).length == 0) {
        makeNewTable(row, $("#results-table"));
      } else {
        updateTable(row, $("#table-" + row.tbl));
      }
    });
  }

  showData(resultData, $("#results-table"));
});

.header {
  font-weight: bold;
  padding: 0.2em 0.4em;
}

.order {
  display: inline-block;
  padding: 0.2em 0.4em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="results-table">
</div>

You can see here how it might be easier to break up the different scenarios with Functions. This way you can make a new Table or update an existing table as needed.

Update

You may consider using DataTables. Example: https://jsfiddle.net/Twisty/u6bdcsqz/51/

Primary Code:

function makeTable(keys, data, parent) {
    var table = $("<table>").appendTo(parent);
    $("<thead>").appendTo(table);
    $("<tr>").appendTo($("thead", table));
    $.each(keys, function(i, k) {
      $("<th>").html(k).appendTo($("thead tr", table));
    });
    $("<tbody>").appendTo(table);
    var row;
    $.each(data, function(i, r) {
      row = $("<tr>").appendTo($("tbody", table));
      $("<td>").html("Table " + r.tbl).appendTo(row);
      $("<td>", {
        class: "order"
      }).html(r.orid).appendTo(row);
      $("<td>", {
        class: "date"
      }).html(r.date).appendTo(row);
      $("<td>", {
        class: "flag"
      }).html(r.flag == 1 ? "X" : "&nbsp;").appendTo(row);
    });
    var groupColumn = 0;
    dataTable = table.DataTable({
      "paging": false,
      "columnDefs": [{
        "visible": false,
        "targets": groupColumn
      }],
      "order": [
        [groupColumn, 'asc']
      ],
      "drawCallback": function(settings) {
        var api = this.api();
        var rows = api.rows({
          page: 'current'
        }).nodes();
        var last = null;

        api.column(groupColumn, {
          page: 'current'
        }).data().each(function(group, i) {
          if (last !== group) {
            $(rows).eq(i).before(
              '<tr class="group"><td colspan="3">' + group + '</td></tr>'
            );
            last = group;
          }
        });
      }
    });
    table.on('click', 'tr.group', function() {
      var currentOrder = table.order()[0];
      if (currentOrder[0] === groupColumn && currentOrder[1] === 'asc') {
        table.order([groupColumn, 'desc']).draw();
      } else {
        table.order([groupColumn, 'asc']).draw();
      }
    });
    console.log("Table created, " + data.length + " rows.");
  }

  function updateTable(data) {
    $.each(data, function(i, r) {
      dataTable.row.add(["Table " + r.tbl, r.orid, r.date, r.flag]).draw(false);
    });
    console.log("Table updated, added " + data.length + " rows.");
  }

  function showData(tableData, target) {
    if (tableData == undefined || target == undefined) {
      return false;
    }
    if ($("table", target).length > 0) {
      console.log("Table Found, updating");
      updateTable(tableData, $("table", target));
    } else {
      console.log("No Table, creating.");
      makeTable(["Table", "Order", "Date", "Flag"], tableData, target);
    }
  }

It’s more than you may want yet it give you all the features you are asking about.