JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">Hello.</div>
<pre id="log"></pre>

CSS

#main {
 margin: 30px;
padding: 1em;    
}
ul {
 list-style: disc inside;   
}

JavaScript

var $preftoc = $('<ul id="preftoc"></ul>'),
    $log = $('#log'),
    log = function (msg) {
        $log.append( $('<div>').text(msg) );
    };

$.each(['foo', 'bar', 'baz', 'quux'], function (i, val) {
   
    $('<li>').append(
        $('<a>', {
            text: val,
            href: '#pref-' + val
        })
    ).appendTo( $preftoc );
    
});
    
$preftoc.appendTo('#main');

$preftoc.on('click', '> li > a', function (e) {
    log('click ">"', this.href);
});
$preftoc.on('click', 'li a', function (e) {
    log('click " "', this.href);
});


window.onhashchange = function () {
    log('hashchange: ' + window.location.hash); 
};