'How to add multiple modals without repeating javascript code

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 1:^[1]

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";
    }
}

Solution 2:^[2]

The best scripts don't depend on IDs at all. I'd probably collect your buttons and modals in DOM node lists and use DOM traversal to open the correct modal.

const modalBtns = document.querySelectorAll('.chimpDet');
const modals = document.querySelectorAll('.modal');
const closeBtns = document.querySelectorAll('.close');

// open next sibling modal on button click
modalBtns.forEach(function(btn) {
  btn.onclick = function() {
    btn.nextElementSibling.style.display = "block";
  }
});

// close all modals on any close button click
closeBtns.forEach(function(btn) {
  btn.onclick = function() {
    modals.forEach(function(modal) {
      modal.style.display = "none";
    });
  }
});

// close all modals on modal wrapper click
window.onclick = function(event) {
  if (Array.from(modals).includes(event.target)) {
    modals.forEach(function(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);
  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;
}

textarea {
  max-width: 100%;
}

<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">
      <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">
      <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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	James
Solution 2

'How to add multiple modals without repeating javascript code

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]