JSFiddle - React, Tailwind, and code Playground

by JonNorman

HTML

<span>Zoe</span>
<span>Jane</span>
<span>Andy</span>
<span>jon</span>
<span>Jacob</span>
<span>Alfred</span>
<span>Bob</span>
<span>Alan</span>

<div id="addToHere">

CSS

h3{font-weight:bold}
.red{color:red}
.blue{color:blue}

JavaScript

$(document).ready(function() {
    var sorted = new Array();
    $("span").each(function() {
        sorted.push(this);
    });
    sorted.sort(function(a, b) {
        nameA = $(a).text().toLowerCase();
        nameB = $(b).text().toLowerCase();
        if (nameA < nameB) { //sort string ascending
            return -1
        } else if (nameA > nameB) {
            return 1
        } else {
            return 0 //default return value (no sorting)
        }
    });
    var theDiv = undefined;
    $.each(sorted, function(index, value) {
        if (index == 0 || $(sorted[index - 1]).text().toLowerCase().substring(0, 1) != $(value).text().toLowerCase().substring(0, 1)) {
            $theDiv = $("<div>").append($("<h3>").text($(value).text().toUpperCase().substring(0, 1)));
            $("#addToHere").append($theDiv);
        }else{
            $theDiv.append("<br>")
        }
        $theDiv.append(value);
    })
    $("#addToHere>div").find("span:odd").addClass("red").end().find("span:even").addClass("blue");
});