Group alphabetic list by letter and add group to unordered list

Question

So I am trying to use jQuery to group a list of names that are listed alphabetically by the first letter of the name of each list item.

I have a search filter used on another page which I want to reuse to search this list as well. To do this I need to restructure the list that is being displayed. I am using PHP to parse the list from JSON can display this in a raw format. Have put in a list at the moment.

<ul>
    <li class="list-group-item" data-name="Achill">Achill</li>
    <li class="list-group-item" data-name="Adrigole">Adrigole</li>
    <li class="list-group-item" data-name="Allihies">Allihies</li>
    <li class="list-group-item" data-name="Ballinaclough">Ballinaclough</li>
    <li class="list-group-item" data-name="Ballydavid Head">Ballydavid Head</li>
</ul>

The format I am trying to change it to is the following:

<div class="list-header">
   <div class="d-flex flex-row" data-name="A">A</div>
   <ul class="list-group pmd-list pmd-card-list">
      <li class="list-group-item" data-name="Achill">Achill</li>
      <li class="list-group-item" data-name="Adrigole"> Adrigole </li>
      <li class="list-group-item" data-name="Allihies"> Allihies </li>
   </ul>
</div>
<div class="list-header">
   <div class="d-flex flex-row" data-name="B">B</div>
   <ul class="list-group pmd-list pmd-card-list">
      <li class="list-group-item" data-name="Ballinaclough">Ballinaclough</li>
      <li class="list-group-item" data-name="Ballydavid Head"> Ballydavid Head </li>
   </ul>
</div>

I've found code to group by the letter and place it at the top of each group and managed to get part of the structure correct but I am trying to wrap the list a <ul> and another <div> but I'm at a loss what to do. Apologies I am learning this as I go along so it could be something I am not seeing.

I have a codpen here https://codepen.io/spudatron/pen/OJyjqaW of what I've attempted so far using somebodies code.

Any help appreciated

Answer 1

Managed to solve them issue with the help of this Fiddle https://jsfiddle.net/3hm6yczh/1/

Replaced this line var c = $(el).attr("class"); with this var c = $(el).text().charAt(0); to sort by the first letter of the value rather than a class name that is used in the Fiddle.

I have a codepen here of a working example https://codepen.io/spudatron/pen/QWjqjYq.

$(document).ready(function(){
        var lis = $("#list > li");
    var as = { };

    $.each(lis, function(i, el){
            var c = $(el).text().charAt(0);
        if(as[c] == null) {
                as[c] = new Array();
        }

        as[c].push(el);
    });

    console.log(as);

    $("#list").empty();
    $.each(as, function(i, el) {
            var li = $("<div class='list-header'><div class='d-flex flex-row' data-name="+ i.toUpperCase() +">" + i.toUpperCase() + "</div>");
        var ul = $("<ul class='list-group pmd-list pmd-card-list'></ul></div>");

        $(ul).append(el);
        $(li).append(ul);
        $("#list").append(li);
    });
});