JSFiddle - React, Tailwind, and code Playground

HTML

<span id="delegateAnchor">
        <div id="side-bar">
            <ul>
                <li><a href="#" data-desc="home">Home</a></li>
                <li><a href="#" data-desc="whoAreWe">Who we are</a></li>
                <li><a href="#" data-desc="services">Services</a></li>
                <li><a href="#" data-desc="whatToExpect">What to expect</a></li>
                <li><a href="#" data-desc="representClients">Representative clients</a></li>
                <li><a href="#" data-desc="successStories">Success stories</a></li>
                <li><a href="#" data-desc="currentLit">Current litigation</a></li>
                <li><a href="#" data-desc="whatIfYouCould">What if you could not be a doctor?</a></li>
            </ul>
        </div>
    </span>

CSS

.active {
    color:red;
}

JavaScript

$(document).ready(function () {
        $('#delegateAnchor').on('click', '#side-bar a', function() {
            var $this = $(this);
            var linkId = $this.data('desc');
            
            $this.closest('ul').find('a').removeClass("active");
            $this.addClass("active");
            
            localStorage.setItem("menuSelection", linkId);
        });
        
        var selectedLinkId = localStorage.getItem("menuSelection");
        
        if (selectedLinkId !== null) {
            $('#side-bar a[data-desc="'+ selectedLinkId +'"]').trigger("click");
        }
    });