JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav navbar-nav navbar-right">
                <li class="selected"><a href="index.php">Home</a></li>
                <li><a href="about-us.php">About Us</a></li>
                <li><a href="services.php">Services</a></li>
                <li><a href="portfolio.php">Portfolio</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <i class="icon-angle-down"></i></a>
                    <ul class="dropdown-menu">
                        <li><a href="career.php">Career</a></li>
                        <li><a href="blog-item.php">Blog Single</a></li>
                        <li><a href="pricing.php">Pricing</a></li>
                        <li><a href="404.php">404</a></li>
                        <li><a href="registration.php">Registration</a></li>
                        <li class="divider"></li>
                        <li><a href="privacy.php">Privacy Policy</a></li>
                        <li><a href="terms.php">Terms of Use</a></li>
                    </ul>
                </li>
                <li><a href="blog.php">Blog</a></li> 
                <li><a href="contact-us.php">Contact</a></li>
            </ul>

CSS

.selected {
       background-color: green;
    }

JavaScript

$(document).ready(function() {        
        var $listItems = $('ul li');
        $listItems.click(function(e) {
            e.stopPropagation();
            e.preventDefault();
            $listItems.removeClass('selected'); 
            $(this).addClass('selected'); 
            console.log( 'here' );
        });
    });