When I check Checkbox Then Only one value display instead of all values

PHP

<?php 

$periods = "select * from perodicity";
$periods = $conn->query($periods) or die ($conn>error.__LINE__);
$peris = [];

while ($row = $periods->fetch_assoc()) {
    $peris[] = $row;
}






//for service 1
$all_activities = "select * from activity join displayserviceactivitymap on activity.activity_id = displayserviceactivitymap.activity_id right  join services on services.service_id = displayserviceactivitymap.service_id";


$all_activities = $conn->query($all_activities) or die ($conn>error.__LINE__);
$activities = [];

while ($row = $all_activities->fetch_assoc()) {
    $activities[] = $row;
}



$repeated = 'repeated';

foreach ($activities as $act) {


  if($act['servicename'] != $repeated){










?>


 <form action="page5_form.php" method="post" name= "test">
  <ul>
    <li>
      <input name='service' type='checkbox' data-id='Incometax'value="<?php echo $service['service_id']?>"/><?php echo $act['servicename']?>
        <?php  $repeated = $act['servicename'];}?>

      <ol>
          <li>
              <?php if($act['activity_id'] != '')

               echo '<input type="checkbox" name="arr['.$act['service_id'].'][activity][]" value="'.$act['activity_id'].'" id="'.$act['activity_id'].'">'.$act['nameofactivity'].'<br>';


              ?>
          <!-- <input type='checkbox' name='activity' value="<?php echo $activity['id']?>" />Revised Return Filling<br> -->


          </li>

           <li>
              <?php foreach ($peris as $per) : ?>

          <input type='checkbox' name='periodicity' value="<?php echo $per['periodicity_id'];?>" /><?php echo $per['per_time'];?>

              <?php endforeach ?>

           </li>
           <br>
        <br>
            <br>



      </ol>

    </li>

    </ul>     

    <?php }?>



      <input name="number" type="hidden" value="<?php echo $next; ?>">

      <input type="submit" name="submit" value="Submit"/>


</form>

PHP code Output :

• Incometax
  • Return
  • Revised
  • Filling
• GST
  • Revised
  • Filling

Here Incometax and Gst are services And other are activity related to that services.

I use javascript code for display and hide activity related to Services But when I click on Incometax then only one activity Return display,same for GST when I click on GST then only one revised display.

I want to display all activity related to that services which service is clicked.

My Javascript Code

let _flags={
  capture:false,
  once:false,
  passive:true
};


document.addEventListener( 'DOMContentLoaded',function( evt ){

  let _form = document.forms.test;
  let _class= 'visible';

  Array.prototype.slice.call( _form.querySelectorAll( 'input[ type="checkbox" ]' ) ).forEach( function( el, i ){
    if( el.dataset.id ) el.addEventListener( 'click', function( e ){

      /* Hide all `OL` elements & uncheck  */
      Array.prototype.slice.call( _form.querySelectorAll( 'li ol' ) ).forEach( function( n ){
        if( n.classList.contains( _class ) ) {
          /* Remove the class from child OL element that contains other input elements ( activities ) */
          n.classList.remove( _class );

          /* Uncheck the other service checkbox */
          n.parentNode.querySelector( 'input[ type="checkbox" ]' ).checked=true;

          /* uncheck all child activity checkboxes */
          Array.prototype.slice.call( n.querySelectorAll( 'input[ type="checkbox" ]' ) ).forEach( function(chk){
            chk.checked ;
          } );
        }
      } );

      /* Display relevant activity checkboxes */
      if( e.target.checked ) e.target.parentNode.querySelector( 'ol' ).classList.toggle( _class )


    }, _flags );
  });
}, _flags );

Thank You