title: More than one slideshows on one page
body: <p>I'm trying to add multiple slideshows to one page but am having some difficulty. I can add two functioning slideshows but when I add a third everything breaks. </p>
  
  <p>Can someone please suggest a solution to add multiple slideshows to one page?</p>
  
  <p>Here is the codepen: <a href="https://codepen.io/anon/pen/YmWNqMc" rel="nofollow noreferrer">https://codepen.io/anon/pen/YmWNqMc</a></p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;h2 style="text-align:center"&gt;Multiple Slideshows&lt;/h2&gt;
  
  &lt;p&gt;Slideshow 1:&lt;/p&gt;
  &lt;div class="slideshow-container"&gt;
    &lt;div class="mySlides1"&gt;
      &lt;img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%"&gt;
    &lt;/div&gt;
  
    &lt;div class="mySlides1"&gt;
      &lt;img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%"&gt;
    &lt;/div&gt;
  
    &lt;div class="mySlides1"&gt;
      &lt;img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%"&gt;
    &lt;/div&gt;
  
    &lt;a class="prev" onclick="plusSlides(-1, 0)"&gt;&lt;/a&gt;
    &lt;a class="next" onclick="plusSlides(1, 0)"&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;p&gt;Slideshow 2:&lt;/p&gt;
  &lt;div class="slideshow-container"&gt;
    &lt;div class="mySlides2"&gt;
      &lt;img src="https://www.w3schools.com/howto/img_band_chicago.jpg" style="width:100%"&gt;
    &lt;/div&gt;
  
    &lt;div class="mySlides2"&gt;
      &lt;img src="https://www.w3schools.com/howto/img_band_la.jpg" style="width:100%"&gt;
    &lt;/div&gt;
  
    &lt;div class="mySlides2"&gt;
      &lt;img src="https://www.w3schools.com/howto/img_band_ny.jpg" style="width:100%"&gt;
    &lt;/div&gt;
  
    &lt;a class="prev" onclick="plusSlides(-1, 1)"&gt;&lt;/a&gt;
    &lt;a class="next" onclick="plusSlides(1, 1)"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {box-sizing: border-box}
  .mySlides1, .mySlides2 {display: none}
  img {vertical-align: middle;}
  
  /* Slideshow container */
  .slideshow-container {
    max-width: 800px;
    position: relative;
  }
  
  /* Next &amp; previous buttons */
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 4%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    height:100%;
    width:49.5%;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a grey background color */
  .prev:hover, .next:hover {
    color: black;
  }
  </code></pre>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>var slideIndex = [1,1,1];
  var slideId = ["mySlides1", "mySlides2"]
  showSlides(1, 0);
  showSlides(1, 1);
  
  function plusSlides(n, no) {
    showSlides(slideIndex[no] += n, no);
  }
  
  function showSlides(n, no) {
    var i;
    var x = document.getElementsByClassName(slideId[no]);
    if (n &gt; x.length) {slideIndex[no] = 1}    
    if (n &lt; 1) {slideIndex[no] = x.length}
    for (i = 0; i &lt; x.length; i++) {
       x[i].style.display = "none";  
    }
    x[slideIndex[no]-1].style.display = "block";  
  }
  </code></pre>