JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<ul class="categories">
   <li data-category="category-1">Category 1</li>
   <li data-category="category-1">Category 1</li>
   <li data-category="category-1">Category 1</li>
   <li data-category="category-1">Category 1</li>
   <li data-category="category-1">Category 1</li>
   <li data-category="category-2">Category 2</li>
   <li data-category="category-2">Category 2</li>
   <li data-category="category-2">Category 2</li>
   <li data-category="category-3">Category 3</li>
</ul>

<ul id="grouped"></ul>

JavaScript

$(function() {
    var categories = {};
    $(".categories li").each(function() {
        var category = $(this).data("category");
        
        if (categories.hasOwnProperty(category) === false) {
            categories[category] = 1;
        } else {
            categories[category]++;
        }
    });
    
    $.each(categories, function(key, val) {
        $("#grouped").append("<li>" + key + " (" + val + ")</li>");
    });
})