Как добавить классы для ul внутри li элементов с помощью javascript

---

я хочу создать динамическое меню с помощью таблицы базы данных.я хочу создать меню под подменю и подменю под другим подменю, например n уровней.
используя функцию php, я создаю html-элементы, подобные этому
мой стол вот такой . то, что я хочу, это если я нажму на родительский элемент, как показать только
дочерние элементы, как А1,А2,А3, если А1 ,А2 и А3 имеет подпункты: я затем нажмите кнопку А1 элемент шоу связанной с дочерними элементами, как, что.для этого прежде всего я хочу, чтобы добавить классы для родительского класса и имена детей занятия с использованием JavaScript.как это сделать .пожалуйста, помогите мне заранее спасибо.

       id    refid  name userdefined 
             1      0     A
             2      0     B
             3      0     C
             5      1     A1
             6      5     AA
             7      5     AB
             8      6     a1
             9      6     a2
             10     1     A2
             11     1     A3
             12     2     B1
             14     3     C1
             15     3     C2


<pre lang="text">
<ul> 
<li> A </li>
<ul>
<li> A1 </li>
<ul>
<li> AA </li>
<ul>
<li> a1 </li>
<li> a2 </li>
</ul>
<li> AB </li>
</ul>
<li> A2 </li>
<li> A3 </li>
</ul>
<li> B </li>
<ul>
<li> B1 </li>
<li> B2 </li>
</ul>
<li> C </li>
<ul>
<li> C1 </li>
<li> C2 </li>
</ul>
</ul>

Что я уже пробовал:

я создал эту рекурсивную функцию для создания элементов ul и li.но проблема здесь в том, что для родительского класса она дает класс limain fine, а для дочерних элементов-lichild для всех дочерних элементов sub, а также дает класс lichild.как это предотвратить.

function submenu($parentid=0){
  global $con;
    $sql=mysqli_query($con,"SELECT * FROM test WHERE refid=".$parentid);
    {
      $rowcount=mysqli_num_rows($sql);
      if($rowcount>0){
        echo '<ul>';
      }
            while($row=mysqli_fetch_array($sql,MYSQLI_ASSOC))
            {
              if(mysqli_num_rows($sql)>0)
              {
              $sql1=mysqli_query($con,"SELECT * FROM test WHERE refid=".$row['id']);
              if(mysqli_num_rows($sql1)>0 && $row['refid']==0)
              {
             
                echo '<li class="limain">'.$row['name'];
                 //echo '<li><a href="'.$row['userdefined'].'">'.$row['name'].'</a>';
                 submenu($row['id']);
                 echo '</li>';
            }
              else{
               echo '<li class="lichild"><a href="'.$row['userdefined'].'">'.$row['name'].'</a>';
               submenu($row['id']);
               echo '</li>';
            }
          }
      }
      if($rowcount>0){
        echo '</ul>';
        }
    }
  }

с помощью этой функции, если нажать на любой родительский элемент, он показывает все дочерние элементы вместе с суб дочерними элементами также.я хочу показать только первый уровень субэлементов только как это сделать, пожалуйста, помогите мне заранее спасибо.

<script src="jquery-3.2.1.js"></script>
  <script type="text/javascript">
 $(function(){

  $(".limain").click(function(){
      
  $(this).find('.lichild').toggle();

  });
});

---