multiple slideshows with different sets of slides in one webpage

I have a website with multiple popups and I want to place a slideshow into each popup; however when i add second slideshow, slides from first slideshow also get to the second slideshow. I use .getElementsByClassName to specify images for slideshows in my script; however i dont understand how can I separate specific slides for each slideshow or adjust functions to handle multiple classnames for each slideshow. Sorry if question is stupid, I am new to this and i am really stuck on this. Thank you for understanding. My code is as follows.

                 <div id="popup1" class="overlay">
                    <div class="popup">
                        <h2>YAMAHA XV950 (BOLT)</h2>
                        <a class="close" href="#">&times;</a>
                        <div class="content">
                            <div class="slideshow-container">
                              <div class="mySlides fade">
                                <div class="numbertext">1 / 3</div>
                                <img src="YAMAHA%20XV950.png"  height="330">
                                <div class="text"></div>
                              </div>

                              <div class="mySlides fade">
                                <div class="numbertext">2 / 3</div>
                                <img src="YAMAHA%20XV950-2.png" height="330">
                                <div class="text"></div>
                              </div>

                              <div class="mySlides fade">
                                <div class="numbertext">3 / 3</div>
                                <img src="YAMAHA%20XV950-3.png" height="330">
                                <div class="text"></div>
                              </div>

                              <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                              <a class="next" onclick="plusSlides(1)">&#10095;</a>
                            </div>
                            <br>
                            <div style="text-align:center">
                              <span class="dot" onclick="currentSlide(1)"></span> 
                              <span class="dot" onclick="currentSlide(2)"></span> 
                              <span class="dot" onclick="currentSlide(3)"></span> 
                            </div>
                            <br>
                        </div>
                    </div>
                </div>
                <div id="popup2" class="overlay">
                    <div class="popup">
                        <h2>SUZUKI INTRUDER (BOLT)</h2>
                        <a class="close" href="#">&times;</a>
                        <div class="content">
                            <div class="slideshow-container">
                              <div class="mySlides1 fade">
                                <div class="numbertext">1 / 3</div>
                                <img src="SintruderC1500BT%20B.O.S.S..png"  height="330">
                                <div class="text"></div>
                              </div>

                              <div class="mySlides1 fade">
                                <div class="numbertext">2 / 3</div>
                                <img src="SintruderC800B%20B.O.S.S..png" height="330">
                                <div class="text"></div>
                              </div>

                              <div class="mySlides1 fade">
                                <div class="numbertext">3 / 3</div>
                                <img src="SintruderM1800R.png" height="330">
                                <div class="text"></div>
                              </div>

                              <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                              <a class="next" onclick="plusSlides(1)">&#10095;</a>
                            </div>
                            <br>
                            <div style="text-align:center">
                              <span class="dot" onclick="currentSlide(1)"></span> 
                              <span class="dot" onclick="currentSlide(2)"></span> 
                              <span class="dot" onclick="currentSlide(3)"></span> 
                            </div>
                         </div>
                    </div>
                </div>
                <script>
                var slideIndex = 1;
                showSlides(slideIndex);

                function plusSlides(n) {
                showSlides(slideIndex += n);
                }

                function currentSlide(n) {
                showSlides(slideIndex = n);
                }

                function showSlides(n) {
                var i;
                var slides = document.getElementsByClassName("mySlides");
                var dots = document.getElementsByClassName("dot");
                if (n > slides.length) {slideIndex = 1}
                if (n < 1) {slideIndex = slides.length}
                for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
                }
                for (i = 0; i < dots.length; i++) {
                   dots[i].className = dots[i].className.replace(" active", "");
                }
                slides[slideIndex-1].style.display = "block";
                   dots[slideIndex-1].className += " active";
                }

                </script>