JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu-primary">
    <li id="1" data-class="one"><a href="#">Index</a>
    </li>
    <li id="2" data-class="two"><a href="#">Other</a>
    </li>
    <li id="3" data-class="three"><a href="#">Thats why</a>
    </li>
    <li id="4" data-class="four"><a id="3" href="#">Sports</a>
    </li>
    <li id="5" data-class="five"><a id="4" href="#">Clients</a>
    </li>
    <li id="6" data-class="six"><a id="5" href="#">Things about history</a>
    </li>
    <li id="7" data-class="seven"><a href="#">Contact</a>
    </li>
</ul>

CSS

.one {
    background:#f00;
}
.two {
    background:#0f0;
}
.three {
    background:#00f;
}
.four {
    background:yellow;
}
.five {
    background:cyan;
}
.six {
    background:orange;
}
.seven {
    background:black;
}

JavaScript

var menu = $('.menu-primary li').click(function () {
    menu.not($(this).toggleClass($(this).data("class"))).removeClass();
});