JSFiddle - React, Tailwind, and code Playground

HTML

<h2>List of Shakespeare's characters:</h2>
<ul>
<li>Aaron</li>
<li>Abbot</li>
<li>Abhorson</li>
<li>Abraham</li>
<li>Achilles</li>
<li>Adam</li>
<li>Adrian</li>
<li>Adriana</li>
<li>Aedile</li>
<li>Aegeon</li>
<li>Aemilia</li>
<li>Aemilius</li>
<li>Aeneas</li>
<li>Agamemnon</li>
<li>Agrippa</li>
<li>Ajax</li>
<li>Alcibiades</li>
<li>Alexander</li>
<li>Alexander Iden</li>
<li>Alexas</li>
<li>Alice</li>
<li>All</li>
<li>All Citizens</li>
<li>All Conspirators</li>
<li>All Ladies</li>
<li>All Lords</li>
<li>All Servants</li>
<li>All the Goths</li>
<li>All The People</li>
<li>Alonso</li>
<li>Ambassador</li>
<li>Amiens</li>
<li>Andromache</li>
<li>Angelo</li>
<li>Angus</li>
<li>Anne Bullen</li>
<li>Anne Page</li>
<li>Another</li>
<li>Antigonus</li>
<li>Antiochus</li>
<li>Antipholus of Ephesus</li>
<li>Antipholus of Syracuse</li>
<li>Antonio</li>
<li>Antony</li>
<li>Apemantus</li>
<li>Apothecary</li>
<li>Archbishop Cranmer</li>
<li>Archbishop of Canterbury</li>
<li>Archbishop Scroop</li>
<li>Archidamus</li>
<li>Ariel</li>
<li>Artemidorus</li>
<li>Arthur</li>
<li>Arviragus</li>
<li>Attendant</li>
<li>Attendants</li>
<li>Audrey</li>
<li>Autolycus</li>
<li>Bagot</li>
<li>Balthasar</li>
<li>Balthazar</li>
<li>Banditti</li>
<li>Banquo</li>
<li>Baptista Minola</li>
<li>Bardolph</li>
<li>Barnardine</li>
<li>Bassanio</li>
<li>Basset</li>
<li>Bassianus</li>
<li>Bastard of Orleans</li>
<li>Bates</li>
<li>Bawd</li>
<li>Beadle</li>
<li>Beatrice</li>
<li>Belarius</li>
<li>Benedick</li>
<li>Benvolio</li>
<li>Bernardo</li>
<li>Bertram</li>
<li>Bianca</li>
<li>Biondello</li>
<li>Biron</li>
<li>Bishop Lincoln</li>
<li>Bishop of Carlisle</li>
<li>Bishop of Ely</li>
<li>Blanch</li>
<li>Blunt</li>
<li>Boatswain</li>
<li>Bolingbroke</li>
<li>Bona</li>
<li>Borachio</li>
<li>Both</li>
<li>Both Citizens</li>
<li>Both...

CSS

#index {
    position:fixed;
    top:0px;
    right:0px;
    width:30px;
    background:rgba(0,0,0,0.1);
}

JavaScript

$(document).ready(function() {

    var previous = "";
    
    $("body").append("<div id='index'></div>");
    
    $("ul li").each(function() {
        var current = $(this).text()[0];
        if (current != previous) { 
            $(this).attr("id", "first_letter_" + current);
            previous = current;
            $("#index").append("<a href='#first_letter_" + current + "'>" + current + "</a><br/>");
        }
    });
    
});