How to add the classes for ul inside li elements using javascript

See more:

Javascript

PHP

MySQL

i want to create the dynamic menu using database table.i want to creating the menu under submenu and submenu under another submenu like n levels.
by using php function i am creating html elements like this
my table like this . what i want is if i click the parent element like A show only the
child elements of the A like A1,A2,A3 if A1 ,A2 and A3 has sub items then i click A1 element show the related child elements like that.for this first i want to add classes for parent class and child classes names using javascript.how to do that .please help me thanks in advance.

       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>

What I have tried:

i have created this recursive function for creating ul and li elements.but the problem is here for parent it is giving limain class fine and for child elements it is giving lichild for all sub child elements also it giving lichild class.how to prevent that.

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>';
        }
    }
  }

by using this function if click Any parent element it showing all the child elements along with sub child elements also.i want to show only the first level sub elements only how to do that please help me thanks in advance.

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

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

  });
});