Front End First Timer: How do I modify Javascript to accomadate multiple image slides within multiple slides?

Question

I have 0 experience in front end, but going for it anyway. I currently have this Javascript:

<script>
    function openCity(evt, cityName) {
      // Declare all variables
      var i, tabcontent, tablinks;

      // Get all elements with class="tabcontent" and hide them
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }

      // Get all elements with class="tablinks" and remove the class "active"
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
      }

      // Show the current tab, and add an "active" class to the button that opened the tab
      document.getElementById(cityName).style.display = "block";
      evt.currentTarget.className += " active";
    } 
    </script>

    <script>
    // Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();
    </script>

    <script>
    let slideIndex = [1,1,1,1,1,1,1,1];
    /* Class the members of each slideshow group with different CSS classes */
    let slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4", "mySlides5", "mySlides6","mySlides7", "mySlides8"]
    showSlides(1, 0);
    showSlides(1, 1);
    showSlides(1, 2);
    showSlides(1, 3);
    showSlides(1, 4);
    showSlides(1, 5);
    showSlides(1, 6);
    showSlides(1, 7);
    showSlides(1, 8);

    function plusSlides(n, no) {
      showSlides(slideIndex[no] += n, no);
    }

    // Thumbnail image controls
    function currentSlide(n, no) {
      showSlides(slideIndex[no] = n, no);
    }

    function showSlides(n, no) {
      let i;
      let x = document.getElementsByClassName(slideId[no]);
      if (n > x.length) {slideIndex[no] = 1}
      if (n < 1) {slideIndex[no] = x.length}
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
      x[slideIndex[no]-1].style.display = "block";
    } </script>

Controlling this HTML:

<tr>
  <th>Bark</th>
  <td>'Describe Bark'</td>
  <td>
    <!-- Slideshow container -->
    <div class="slideshow-container">
      <!-- Full-width images with number and caption text -->
      <div class="mySlides1">
        <div class="numbertext">1 / 3</div>
        <img src="image_placeholder.png" style="width: 100%" />
        <div class="text">Caption Text</div>
      </div>

      <div class="mySlides1">
        <div class="numbertext">2 / 3</div>
        <img src="image_placeholder.png" style="width: 100%" />
        <div class="text">Caption Two</div>
      </div>

      <div class="mySlides1">
        <div class="numbertext">3 / 3</div>
        <img src="image_placeholder.png" style="width: 100%" />
        <div class="text">Caption Three</div>
      </div>

      <!-- Next and previous buttons -->
      <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>
      <a class="next" onclick="plusSlides(1, 0)">&#10095;</a>
    </div>

    <!-- The dots/circles -->
    <div style="text-align: center">
      <span class="dot" onclick="currentSlide(1, 0)"></span>
      <span class="dot" onclick="currentSlide(2, 0)"></span>
      <span class="dot" onclick="currentSlide(3, 0)"></span>
    </div>
  </td>
</tr>

This is one section out of eight within my entire code.

This is the end result: image slides within tabs. 8 image slides for each of 6 tabs

Now, my questions is this: How do I modify the Javascript code in an efficient way for each tab?

I am aware I can make div classes up to mySlides36 or whatever and modifiy the script accordingly but that would be highly inefficient. There has to be a smart way to make the script work based on the tab selected(Spring, Summer, Fall, etc...)

Please let me know what you think,

Thanks!!