JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="BaseNode">
    <li class="a1">A</li>
    <li class="a1">B</li>
    <li class="a1">C</li>
    <li class="a1">D</li>
    <li class="a2">E</li>
    <li class="a2">F</li>
    <li class="a3">G</li>
</ul>

JavaScript

$(document).ready(function(){
		var lis = $("#BaseNode > LI");
    var as = { };
    
    $.each(lis, function(i, el){
    		var c = $(el).attr("class");
        
        if(as[c] == null) {
        		as[c] = new Array();
        }
        
        as[c].push(el);
    });
    
    console.log(as);
    
    $("#BaseNode").empty();
    $.each(as, function(i, el) {
    		var li = $("<li>" + i.toUpperCase() + "</li>");
        var ul = $("<ul></ul>");
        
        $(ul).append(el);
        $(li).append(ul);
        $("#BaseNode").append(li);
    });
});