Javascript Modal gallery баг

Возникла проблема просмотром “картинок” в модальном окне.При нажати на кнопки next or prev сплывает ненужный блок.Помогите решить проблему заранее спасибо.

var divs = document.querySelectorAll('#div'),   caption = document.querySelectorAll('.modal-content .modal-caption'),   modal = document.getElementById('modal'),   next = document.getElementById('next'),   prev = document.getElementById('prev'),   index = 0;    for (var i = 0; i < divs.length; i++) {    divs[i].addEventListener('click', myFunction); }  function myFunction() {    for (var i = 0; i < caption.length; i++) {     caption[i].style.display = "none";   }    for (var j = 0; j < divs.length; j++) {     if (divs[j] == this) {       modal.style.display = "block";       caption[j].style.display = "block";       break;     }   }  }    next.addEventListener('click', function() {    caption[index].style.display = "none";   index++;   if (index >= caption.length) {     index = 0;   }    caption[index].style.display = "block";  });  prev.addEventListener('click', function() {    caption[index].style.display = "none";   index--;   if (index < 0) {     index = caption.length - 1;   }    caption[index].style.display = "block";  });
body {   margin: 0;   padding: 0; }  p{cursor:pointer;}  div {   width: 300px;   margin: 0 auto;   border: 1px solid black;   padding: 1em;   display: flex; }  #modal {   position: fixed;   top: 0;   left: 0;   width: 100%;   height: 100%;   z-index: 10;   background-color: rgb(0, 0, 0);   display: none;   overflow: scroll; }  .modal-content {   width: 50%;   position: absolute;   top: 15%;   left: 25%;   display: block;   border: 1px solid red;   padding: 0;   margin: 0; }  .modal-content>.modal-caption {   width: 100%;   border: 1px solid white;   color: white;   margin: 0;   display: none;   text-align: center; }  #close {   color: white;   font-size: 1em;   position: absolute;   top: 3em;   right: 3em;   cursor: pointer; }  span#next {   position: absolute;   top: 25%;   left: 10%;   z-index: 10;   font-size: 4em;   font-weight: bold;   color: white;   cursor: pointer; }  span#prev {   position: absolute;   top: 25%;   right: 10%;   z-index: 10;   font-size: 4em;   font-weight: bold;   color: white;   cursor: pointer; }
<div id="div"><p>ImageOne</p></div> <div id="div"><p>ImageTwo</p></div> <div id="div"><p>ImageThree</p></div> <div id="div"><p>ImageFour</p></div> <div id="div"><p>ImageFive</p></div>   <div id="modal">   <span id="close" onclick="document.getElementById('modal').style.display='none';">Close</span>   <div class="modal-content">     <div class="modal-caption">       <h1>ImageOne</h1>     </div>     <div class="modal-caption">       <h1>ImageTwo</h1>     </div>     <div class="modal-caption">       <h1>ImageThree</h1>     </div>     <div class="modal-caption">       <h1>ImageFour</h1>     </div>     <div class="modal-caption">       <h1>ImageFive</h1>     </div>   </div>   <span id="next"><</span>   <span id="prev">></span> </div>