JSFiddle - React, Tailwind, and code Playground

by straeger

HTML

<li class="lv3"><a class="catLink" href="#">Bob Smith</a></li>
<li class="lv3"><a class="catLink" href="#">Bob Stone</a></li>
<li class="lv3"><a class="catLink" href="#">Bob Miller</a></li>
<li class="lv3"><a class="catLink" href="#">John Smith</a></li>
<li class="lv3"><a class="catLink" href="#">John Doe</a></li>
<li class="lv3"><a class="catLink" href="#">Jason McGee</a></li>

JavaScript

$(document).ready(function(){
    var liArray = $('.lv3');
    var sorted = {};
    
    $.each(liArray, function(index, value){
        var firstName = $(value).text().split(' ')[0];
        if(sorted[firstName] !== undefined){
                sorted[firstName].elements.push(value);
        }else{
                sorted[firstName] = { elements : [value] };
        }
        $(value).remove();
    });
    
    $.each(sorted, function(index, value){
        console.log(value + index);
        var $ul = $('<ul>', { 'class' : index });
        $ul.append(value.elements);
        $('body').append($ul);
    });    
        
    
    
    
    
})