JSFiddle - React, Tailwind, and code Playground

by Roman Zharikov

HTML

<ul>
  <li><a href="#">Link 01</a></li>
  <li><a href="#">Link 02</a></li>
  <li>
    <a href="#" class="emb">Link 03</a>
    <ul class="pinbox">
      <li><a href="#">Link 01</a></li>
      <li><a href="#">Link 02</a></li>
      <li><a href="#">Link 03</a></li>
      <li>
        <a href="#" class="emb">Link 04</a>
        <ul class="pinbox pinbox_active">
          <li><a href="#">Link 01</a></li>
          <li><a href="#">Link 02</a></li>
          <li><a href="#">Link 03</a></li>
        </ul>
      </li>
      <li><a href="#">Link 05</a></li>
    </ul>
  </li>
  <li><a href="#">Link 04</a></li>
  <li><a href="#">Link 05</a></li>
</ul>

<ul>
  <li><a href="#">Link 01</a></li>
  <li><a href="#">Link 02</a></li>
  <li>
    <a href="#" class="emb">Link 03</a>
    <ul class="pinbox">
      <li><a href="#">Link 01</a></li>
      <li><a href="#">Link 02</a></li>
      <li><a href="#">Link 03</a></li>
      <li>
        <a href="#" class="emb">Link 04</a>
        <ul class="pinbox pinbox_active">
          <li><a href="#">Link 01</a></li>
          <li><a href="#">Link 02</a></li>
          <li><a href="#">Link 03</a></li>
        </ul>
      </li>
      <li><a href="#">Link 05</a></li>
    </ul>
  </li>
  <li><a href="#">Link 04</a></li>
  <li><a href="#">Link 05</a></li>
</ul>

CSS

.pinbox_active {
  background: green;
}

JavaScript

$(function() {
  $('.emb').each(function() {
    $(this).on('click', function() {
      $(this).parents('.pinbox').toggleClass('pinbox_active');
    });
  });
});