JSFiddle - React, Tailwind, and code Playground

JavaScript

define(function (require, exports, module) {
    'use strict';
    var t = require("transducers");
    var most = require("most");

    var groupby = function (prev, curr) {
        var key = curr.type;
        if (!prev[key]) {
            prev[key] = [curr];
        } else {
            prev[key].push(curr);
        }
        return prev;
    };
    function category(kv) {
        return {
            type: kv[0],
            label: kv[1][0].label,
            counter: kv[1].length
        }
    }
    function dom(cat) {
        var el = document.createElement("li");
        el.innerHTML = cat.label;
        return el;
    }

    function append(prev, curr) {
        prev.appendChild(curr);
        return prev;
    }

    function createClick(prev, curr) {
        return prev.merge(most.fromEvent("click", curr)
                .map(function (e) {
                    return e.currentTarget.innerHTML;
                })
        )
    }

    var xf = t.comp(
        t.map(category),
        t.map(dom)
    );

    module.exports = {
        main: function (data) {

            var groups = t.reduce(groupby, {}, data);
            var container = t.transduce(xf, append, document.querySelector("ul"), groups);
            var streams = t.reduce(createClick, most.empty(), [].slice.call(container.querySelectorAll("li"), 0));

            streams.forEach(function (e) {
                console.log("click", e);
            });
        }
    };
});