Javascript Modal gallery всплывает ненужное окно

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>