I've been trying to implement this script which pulls values from another page and sorts them into a table alphabetically. The three values are Name - City - District. The script works perfectly. But on top of that, I would like the script to group the values by city. So instead of:

--Name -- City -- District --
Name1 -- London -- Kingsroad
Name3 -- London -- Westminster
Name4 -- Birmingham -- Yardley

I'd like for it to be organized as below, with the city column spanning 2 columns.

------ Birmingham -----
Name4 -- Yardley
------ London -----
Name1 -- Kingsroad
Name3 -- Westminster

The script I've used to pull values is this:

var fhold =$("#List");


$.get("/memberlist", function(data) {

$('.mem-info',data).each(function(){
 fhold.append($(this));
 

});

 var items = fhold.children('.mem-info').get();

items.sort(function(a, b) {
  return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
});
 
 fhold.append(items);
 
});
});

Here's the HTML for the same:

<table id="List" class="display"><tbody>
<tr> <td>Name</td> <td>City</td><td>District</td> </tr>
</tbody>
</table>

So again, so far, it works fine. But I want it to group by city. I've tried using this fix here (https://datatables.net/examples/advanced_init/row_grouping.html) but I believe it only works for static values. I've looked into grouping values dynamically but most fixes say that a click function is required.

Is there a way to do so without a click/event function? Any help would be appreciated. Much thanks!