How to add multiple modals without repeating javascript code

Issue

I have added modals to my site and included the for loop which is working, but the problem is both modals show same content yet they are supposed to show different content. How do I fix this without repeating my self in Javascript.

var modal = document.getElementById("myModal");
var btn = document.getElementsByClassName("chimpDet");
var span = document.getElementsByClassName("close")[0];


for (var i = 0; i < btn.length; i++) {
  btn[i].onclick = function() {
    modal.style.display = "block";
  }
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

.chimps {
  margin-left: 20px;
  height: 150px;
  width: 250px;
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 10px;
}

.chimpDet {
  background-color: rgba(0, 128, 0, 0.5);
  cursor: pointer;
}

.chimpImg {
  height: 150px;
  width: 250px;
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}


/* Add Animation */

@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}


/* The Close Button */

.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {
  padding: 2px 16px;
}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.saveBtn {
  background-color: green;
  border: none;
  height: 50px;
  width: 250px;
  cursor: pointer;
  color: white;
  font-size: 20px;
}

.gig {
  display: flex;
}

.cIB {
  display: flex;
  flex-direction: column;
}

<div class="chimps">
  <div class="chiM">
    <div class="chimpDet">
      <img class="chimpImg" src="https://via.placeholder.com/250x150" alt="">
      <h3>AFRIKA</h3>
    </div>
    <div id="myModal" class="modal">
      <!-- Modal content -->
      <div class="modal-content">
        <div class="modal-header">
          <span class="close">&times;</span>
          <h2>Welcome to Afrika's Diary</h2>
        </div>
        <div class="modal-body">
          <form action="">
            <div class="gig">
              <div>
                <textarea name="" id="" cols="90" rows="20"></textarea>
              </div>
              <div class="cIB">
                <img class="chimpImg" src="https://via.placeholder.com/250x150" alt="">
                <button class="saveBtn">Save</button>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <h3>Afrika</h3>
        </div>
      </div>
    </div>
  </div>
  <div class="chiM">
    <div class="chimpDet">
      <img class="chimpImg" src="https://via.placeholder.com/250x150" alt="">
      <h3>Asega</h3>
    </div>
    <div id="myModal" class="modal">
      <!-- Modal content -->
      <div class="modal-content">
        <div class="modal-header">
          <span class="close">&times;</span>
          <h2>Welcome to Asega's Diary</h2>
        </div>
      </div>
    </div>
  </div>

</div>

Solution

You can only use an ID once on a page (must be unique), so having two divs with id="myModal" will not work. Fortunately you don't need those IDs, it's easy to get the "next" element of the button that was clicked, which happens to be the modal you want to open.

for (var i = 0; i < btn.length; i++) {
     btn[i].onclick = function() {
         let modal = this.nextElementSibling;
         modal.style.display = "block";
    }
}

Answered By - James