JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
 <ul id="subj_tree">
      <li><span>sub name</span>
        <ul>
         <li><span> sub cat name</span></li>
         <li><span> sub cat name </span></li>
         <li><span> sub cat name </span></li>
         <li><span> sub cat name </span></li>
         <li><span> sub cat name </span></li>
       </ul>
      </li>
    </ul>
    
     <ul id="subj_tree">
      <li><span>sub name</span>
        <ul>
         <li><span> sub cat name</span></li>
         <li><span> sub cat name </span></li>
         <li><span> sub cat name </span></li>
         <li><span> sub cat name </span></li>
         <li><span> sub cat name </span></li>
       </ul>
      </li>
    </ul>
    
     <ul id="subj_tree">
      <li><span>sub name</span>
        <ul>
         <li><span> sub cat name</span></li>
         <li><span> sub cat name </span></li>
         <li><span> sub cat name </span></li>
         <li><span> sub cat name </span></li>
         <li><span> sub cat name </span></li>
       </ul>
      </li>
    </ul>

CSS

#subj_tree ul{
  display:none;
}

JavaScript

$(function () {
    $('#subj_tree > li span').on("click", function (e) {
      var parent = $(this).parent();
      $('ul', parent).toggle();
    });
  });