javascript html css modal-dialog lightbox

Multiple w3Schools Lightboxes (Modal Boxes) on same page: modal boxes only showing first modal's content

I'm still new to HTML/CSS and I have no idea about Javascript. I need three lightboxes of images on a page with button tabs, where each button reveals a page with a lightbox on it. I originally used W3Schools lightbox code (https://www.w3schools.com/howto/howto_js_lightbox.asp) but I have altered it here and there.

All of the images in the tabs look fine, but when you click on them they pop up with the first lightbox/modal's content. I also noticed that my previous/next buttons will now only go through the content once and then go blank for a few clicks. That's not the problem I'm most concerned with fixing, but perhaps it will give someone insight to what's wrong.

I've tried many possible solutions, including changing class names and id names (because I learned that you shouldn't have multiple divs with same id name), but it didn't work for me, so I brought the code back to how I began with it. I even changed the slide numbers that the modal box picks up so that the second modal box's slides were numbered 4,5,6 instead of 1,2,3, but still no luck. Any ideas?

Thanks!

HTML, CSS, & JAVASCRIPT below. Please note that the javascript is in the HTML file because that's how I have it in my document, so I thought I'd keep everything consistent. Also looks like there are many errors in the code- sorry I don't know how to fix them :/

html
{
    width:500px;
    margin:auto;
}

/* BUTTON COLORS */
.light-blue
    {background-color: #4e9abe;}
.pea-green
    {background-color: #a39a4b;}
.teal
    {background-color: #298e86;}



/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 10px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #ffffff;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  line-height:1.3;
}



/* The Close Button */
.close {
  color: #999900;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: #4e7977;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


.next a, .prev a
{
    text-decoration: none;
}


.modal-images
{max-height:75vh;
    max-width:auto;
    border-radius:5%;
    border:2px dotted;
    display: inline;
    }

/* Style the tab */
.tab {
    overflow: hidden;
}

/* Style the buttons inside the tab */
.tab button {
   
    display: inline-block;
    width:133px;
    height:133px;
    line-height: 20px;
    margin:4px;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    letter-spacing: 2px;
    font-size:18px;
    font-weight:bold;
    text-transform: uppercase;
    border:none;
}


.topright:hover {color: red;}

/* Change background color of buttons on hover */
.tab button:hover {
    background: #746572;}

/* Create an active/current tablink class */

.tab button.active {
    border: 3px #505050 dashed;
    padding:5px;
    opacity: 0.5;
    outline:none;
}
/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    width:100%;
}


/* Style the close button */
.topright {
    float: right;
    cursor: pointer;
    font-size: 28px;
}

<!DOCTYPE html>


    
    
<script>
    // Open the Modal
    function openModal() 
    {document.getElementById('myModal').style.display = "block";}
    // Close the Modal
    function closeModal()
    {document.getElementById('myModal').style.display = "none";}
    var slideIndex = 1;
    showSlides(slideIndex);
    // Next/previous controls
    function plusSlides(n)
    {showSlides(slideIndex += n);}
    // Thumbnail image controls
    function currentSlide(n) 
    {showSlides(slideIndex = n);}
    function showSlides(n)
    {var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("demo");
    var captionText = document.getElementById("caption");
    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";
    captionText.innerHTML = dots[slideIndex-1].alt;}
</script>


<!--JAVASCRIPT FOR KEYBOARD NAVIGATION (PREV, NEXT, AND ESCAPE BUTTONS)-->
<script>
    document.onkeydown = function (e) 
    {e = e || window.event;
    if (e.keyCode == 37) {document.querySelector('.prev').click();}
    if (e.keyCode == 27) {document.querySelector('.close').click();}    
    else if (e.keyCode == 39) {document.querySelector('.next').click();}};
</script>



<div class="tab">
    <button class="tablinks pea-green" onclick="openCity(event, 'tab1')">Tab 1</button>
  
    <button class="tablinks light-blue" onclick="openCity(event, 'tab2')">Tab 2</button>
  
    <button class="tablinks teal" onclick="openCity(event, 'tab3')">Tab 3 </button>
</div>


<div id="tab1" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image1" class="modal-images" onclick="openModal();currentSlide(1)">
    <img src="http://placehold.it/120x120&text=image2" class="modal-images" onclick="openModal();currentSlide(2)">
    <img src="http://placehold.it/120x120&text=image3" class="modal-images" onclick="openModal();currentSlide(3)">
</div>  
    
    <!--CLICKED-ON IMAGES IN MODAL BOX-->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">
    
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image1" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 1, Modal 1
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image2" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 2, Modal 1
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image3" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 3, Modal 1
    </div>
    

    
    
     <!-- NEXT/PREVIOUS CONTROLS -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>   
   
    
    
       
    
    
   
</div>
  

      
<div id="tab2" class="tabcontent">
   <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image4" class="modal-images" onclick="openModal();currentSlide(1)">
    <img src="http://placehold.it/120x120&text=image5" class="modal-images" onclick="openModal();currentSlide(2)">
    <img src="http://placehold.it/120x120&text=image6" class="modal-images" onclick="openModal();currentSlide(3)">
</div>  
    
    <!--CLICKED-ON IMAGES IN MODAL BOX-->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">
    
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image4" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 4, Modal 2
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image5" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 5, Modal 2
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image6" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 6, Modal 2
    </div>
    

    
    
     <!-- NEXT/PREVIOUS CONTROLS -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>


</div>
</div>  

<div id="tab3" class="tabcontent">
    <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image7" class="modal-images" onclick="openModal();currentSlide(1)">
    <img src="http://placehold.it/120x120&text=image8" class="modal-images" onclick="openModal();currentSlide(2)">
    <img src="http://placehold.it/120x120&text=image9" class="modal-images" onclick="openModal();currentSlide(3)">
</div>  
    
    <!--CLICKED-ON IMAGES IN MODAL BOX-->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">
    
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image7" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 7, Modal 3
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image8" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 8, Modal 3
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image9" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 9, Modal 3
    </div>
    
    
    <!-- NEXT/PREVIOUS CONTROLS -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
</div>

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>
    
  
    
</html>

Solution

You really only want one element with the #myModal id, so basically, I just deleted a bunch of redundant code and moved your .tabcontent markup outside the modal markup. Then I changed the currentSlide() function parameters to their index respective of the total number of images. This way, when you click on image5, for example, the modal actually opens to image5. See http://jsfiddle.net/qryu0dmL/19/

<script>
    // Open the Modal
    function openModal() 
    {document.getElementById('myModal').style.display = "block";}
    // Close the Modal
    function closeModal()
    {document.getElementById('myModal').style.display = "none";}
    var slideIndex = 1;
    showSlides(slideIndex);
    // Next/previous controls
    function plusSlides(n)
    {showSlides(slideIndex += n);}
    // Thumbnail image controls
    function currentSlide(n) 
    {showSlides(slideIndex = n);}
    function showSlides(n)
    {var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("demo");
    var captionText = document.getElementById("caption");
    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";
    captionText.innerHTML = dots[slideIndex-1].alt;}
</script>


<!--JAVASCRIPT FOR KEYBOARD NAVIGATION (PREV, NEXT, AND ESCAPE BUTTONS)-->
<script>
    document.onkeydown = function (e) 
    {e = e || window.event;
    if (e.keyCode == 37) {document.querySelector('.prev').click();}
    if (e.keyCode == 27) {document.querySelector('.close').click();}    
    else if (e.keyCode == 39) {document.querySelector('.next').click();}};
</script>



<div class="tab">
    <button class="tablinks pea-green" onclick="openCity(event, 'tab1')">Tab 1</button>

    <button class="tablinks light-blue" onclick="openCity(event, 'tab2')">Tab 2</button>

    <button class="tablinks teal" onclick="openCity(event, 'tab3')">Tab 3 </button>
</div>


<div id="tab1" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image1" class="modal-images" onclick="openModal();currentSlide(1)">
    <img src="http://placehold.it/120x120&text=image2" class="modal-images" onclick="openModal();currentSlide(2)">
    <img src="http://placehold.it/120x120&text=image3" class="modal-images" onclick="openModal();currentSlide(3)">
</div>  
<div id="tab2" class="tabcontent">
   <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image4" class="modal-images" onclick="openModal();currentSlide(4)">
    <img src="http://placehold.it/120x120&text=image5" class="modal-images" onclick="openModal();currentSlide(5)">
    <img src="http://placehold.it/120x120&text=image6" class="modal-images" onclick="openModal();currentSlide(6)">
</div>  
<div id="tab3" class="tabcontent">
    <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image7" class="modal-images" onclick="openModal();currentSlide(7)">
    <img src="http://placehold.it/120x120&text=image8" class="modal-images" onclick="openModal();currentSlide(8)">
    <img src="http://placehold.it/120x120&text=image9" class="modal-images" onclick="openModal();currentSlide(9)">
</div>  


    <!--CLICKED-ON IMAGES IN MODAL BOX-->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">

    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image1" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 1, Modal 1
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image2" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 2, Modal 1
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image3" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 3, Modal 1
    </div>



    <!--CLICKED-ON IMAGES IN MODAL BOX-->


    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image4" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 4, Modal 2
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image5" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 5, Modal 2
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image6" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 6, Modal 2
    </div>



    <!--CLICKED-ON IMAGES IN MODAL BOX-->


    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image7" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 7, Modal 3
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image8" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 8, Modal 3
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image9" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 9, Modal 3
    </div>

         <!-- NEXT/PREVIOUS CONTROLS -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
</div>

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>