Toggleclass in jQuery example with click event

In the following web example we have two input radio with id respectively single and list that allows us to choose between two options, a div with id my_header and a list with id my_list with 3 options each with a different class that sets by default different color styles to the text that contains them.

With jQuery we create the following options:

Clicking on the input radio with id single executes a function that selects the div with id my_header and through the toggleClass function activates or deactivates the set-color1 and set-font styles depending on its state.
Clicking on the input radio with id list executes a function that selects the list with id my_list and each element li, through the toggleClass function executes a function that activates or deactivates the set-color styles and its successive index value starting from 0.

<html>
  <style>
    .set-color0{color:red;}
    .set-color1{color:blue;}
    .set-color2{color:yellow;}
    .set-font{font-size:22px;}
  </style>
  <body>
    <input type="radio" id="single" name="select_option"> Option Single
    <hr>
    <div id="my_header" class="set-color0">Hello</div>
    <hr><hr>
    <input type="radio" id="list" name="select_option"> Option List
    <hr>
    <ul id="my_list">
      <li class="set-color0">Text 1</li>
      <li class="set-color1">Text 2</li>
      <li class="set-color2">Text 3</li>
    </ul>
    <!--Script jQuery-->
    <script>
       $(document).ready(function(){
         /*
         Clicking on the input radio with id single executes a function that selects the div 
         with id my_header and through the toggleClass function activates or deactivates the set-color1 
         and set-font styles depending on its state
         */
         $('#single').click(function(){
         	$('#my_header').toggleClass('set-color1 set-font');
         });
         /*
         Clicking on the input radio with id list executes a function that selects the list with 
         id my_list and each element li, through the toggleClass function executes a function that 
         activates or deactivates the set-color styles and its successive index value starting from 0
         */
         $('#list').click(function(){
           $("#my_list li").toggleClass(function(index) {
             return "set-color"+index;
           });
         });
       });
    </script>
    <!--JQuery Library-->
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
  </body>
</html>