JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
   <div id="sidebar">
      <ul>
          <li class="selected"><a href="#">Header 1</a>
              <ul>
                   <li><a href="#">Link 1</a></li>
                   <li><a href="#">Link 2</a></li>
                   <li><a href="#">Link 3</a></li>
                   <li><a href="#">Link 4</a></li>
              </ul>
          </li>
          <li><a href="#">Header 2</a>
            <ul>
               <li><a href="#">Link 1</a></li>
               <li><a href="#">Link 2</a></li>
            </ul>
          </li>
          <li><a href="#">Header 3</a>
            <ul>
               <li><a href="#">Link 1</a></li>
               <li><a href="#">Link 2</a></li>
            </ul>
          </li>
          <li><a href="#">Header 7</a>
             <ul>
             </ul>
          </li>
          <li><a href="#">Header 4</a>
             <ul>
             </ul>
          </li>
          <li><a href="#">Header 5</a>
            <ul>
              <li><a href="#">Link 1</a></li>
            </ul>
          </li>
      </ul>
   </div>
</div>

CSS

.selected {
    background : #000;
}

JavaScript

$('#sidebar > ul > li > a').bind('click', function (e) {
    e.preventDefault();
    $('#sidebar').children('ul').children('li').removeClass('selected');
    $(this).parent().toggleClass('selected');
});