Using the addClass and Click function in jQuery to add classes

We have a div with id my_header, a list ul with id my_list and a button with id show. We apply the following:

We select the button with id show, when we click with the function click through the button with id show a function that adds the classes set-deg1 and set-deg2 to the div with id my_header is generated.
When loading the page we select the list with id my_list and we add to each element li the classes set-deg followed by the index number, that is to say, 0, 1,....

<html>
  <style>
    .set-deg1{
      color:red;
      font-size:18px;
    }
    .set-deg2{
      padding:15px;
      background-color:pink;
      margin-bottom:10px;
    }
  </style>
  <body>
    <div id="my_header">Hello</div>
    <ul id="my_list">
      <li>Text 1</li>
      <li>Text 2</li>
      <li>Text 3</li>
      <li>Text 4</li>
    </ul>
    <button id="show">Apply Style</button>
    <!--Script jQuery-->
    <script>
       $(document).ready(function(){
         /*We select the button with id show, when we click with the function click through 
         the button with id show a function that adds the classes set-deg1 and set-deg2 to 
         the div with id my_header is generated.*/
         $('#show').click(function(){
           $('#my_header').addClass('set-deg1 set-deg2');
         });
         /*
         When loading the page we select the list with id my_list and we add to each element li the 
         classes set-deg followed by the index number, that is to say, 0, 1,....
         */
         $("#my_list li").addClass(function(index) {
            return "set-deg"+index;
            console.log('Style added "set-deg'+index+'"');
        });

       });
    </script>
    <!--JQuery Library-->
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
  </body>
</html>