How to copy paste a modal

Question

For a school project I want to make modals for every student in my class. My problem is that only the first modal is working.

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  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/Box */

.modal-content {
  background-color: #fefefe;
  margin: 14% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: none;
  width: 80%;
  /* Could be more or less, depending on screen size */
  box-shadow: 0 10px 20px 0px rgba(0, 0, 0, 0.5);
}


/* The Close Button */

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

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


/* Button Design */

#myBtn {
  background-image: url(/images/blank-profile-picture-973460_960_720.png);
  font-family: Lato-Bold;
  font-size: 20px;
  background-color: rgb(55, 154, 177);
  background-size: cover;
  width: 300px;
  height: 300px;
  margin: 10px;
  float: left;
  text-align: center;
  color: white;
  border: 0;
  cursor: pointer;
}

p.Info {
  font-family: Lato-regular;
  font-size: 15px;
  color: rgb(40, 40, 40);
}

<!-- Trigger/Open The Modal -->
<button id="myBtn">Anthony</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p class="Info">
      Nachname:König<br> Vorname:Anthony
      <br> Geburtstag:24.12.1998
      <br> Herkunft:Deutschland
      <br> Adresse:xxxxxxxxxxxxxxxxx
      <br> Mobilnummer:xxxxxxxxxxxxxx
      <br> E-Mail:xxxxxxxxxxxxxxxxxbr> Fachlicher Schwerpunkt:Programmieren<br> Hobbys:Basketball, Tennis, Krafttraining, Gaming und Fussball.<br> Socialmedia:url Facebook: url Instagram:<br> Snapcode: anthony.k1ng<br>
    </p>
  </div>

</div>
<!-- Trigger/Open The Modal -->
<button id="myBtn">David</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p class="Info">
      Nachname:König<br> Vorname:Anthony
      <br> Geburtstag:24.12.1998
      <br> Herkunft:Deutschland
      <br> Adresse:xxxxxxxxxxxxxxxxxxxxxx
      <br> Mobilnummer:xxxxxxxxxxxxxxxxxx
      <br> E-Mail:xxxxxxxxxxxxxxxx
      <br> Fachlicher Schwerpunkt:Programmieren<br> Hobbys:Basketball, Tennis, Krafttraining, Gaming und Fussball.<br> Socialmedia:url Facebook: url Instagram:<br> Snapcode: anthony.k1ng<br>
    </p>
  </div>

</div>

Answer 1

Here is more generalized approach that relies on the ordering of the dom elements.

In this case if you wanted to add more, all you would have to do is copy the button and modal html and change the content. You wouldn't have to change the code, css, or div id's.

JSFiddle of the same.

// Get the modals
var modals = document.getElementsByClassName('myModal');

// Get the buttons that opens the modals
var btns = document.getElementsByClassName("myBtn");

// Get the <span> elements that closes the modals
var spans = document.getElementsByClassName("close");

function makeShower(index) {
	return function(event) {
  	modals[index].style.display = "block";
  }
}

function makeHider(index) {
	return function(event) {
  	modals[index].style.display = "none";
  }
}

for (let i = 0; i < btns.length; i++) {
  btns[i].onclick = makeShower(i);
  spans[i].onclick = makeHider(i);
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target.className == "myModal modal") {
    event.target.style.display = "none";
  }
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    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/Box */
.modal-content {
    background-color: #fefefe;
    margin: 14% auto; /* 15% from the top and centered */
    padding: 20px;
    border: none;
    width: 80%; /* Could be more or less, depending on screen size */
        box-shadow: 0 10px 20px 0px rgba(0, 0, 0, 0.5);
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
/* Button Design */
.myBtn {
  background-image: url(/images/blank-profile-picture-973460_960_720.png);
   font-family: Lato-Bold;
   font-size: 20px;
   background-color: rgb(55, 154, 177);
   background-size:cover;
   width: 300px;
   height: 300px;
   margin: 10px;
   float: left;
   text-align: center;
   color:white;
   border:0;
   cursor: pointer;
}

p.Info {
     font-family: Lato-regular;
     font-size: 15px;
     color: rgb(40, 40, 40);


}

  <!-- Trigger/Open The Modal -->
<button class="myBtn">Anthony</button>

<!-- The Modal -->
<div class="myModal modal">

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p class="Info">
Nachname:König<br>
Vorname:Anthony<br>
Geburtstag:24.12.1998<br>
Herkunft:Deutschland<br>
Adresse:xxxxxxxxxxxxxxxxx<br>
Mobilnummer:xxxxxxxxxxxxxx<br>
E-Mail:xxxxxxxxxxxxxxxxxbr>
Fachlicher Schwerpunkt:Programmieren<br>
Hobbys:Basketball, Tennis, Krafttraining, Gaming und Fussball.<br>
Socialmedia:url Facebook: url Instagram:<br>
Snapcode: anthony.k1ng<br>
</p>
</div>

</div>
 <!-- Trigger/Open The Modal -->
<button class="myBtn">David</button>

<!-- The Modal -->
<div class="myModal modal" >

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p class="Info">
Nachname:David<br>
Vorname:David<br>
Geburtstag:24.12.1998<br>
Herkunft:Deutschland<br>
Adresse:xxxxxxxxxxxxxxxxxxxxxx<br>
Mobilnummer:xxxxxxxxxxxxxxxxxx<br>
E-Mail:xxxxxxxxxxxxxxxx<br>
Fachlicher Schwerpunkt:Programmieren<br>
Hobbys:Basketball, Tennis, Krafttraining, Gaming und Fussball.<br>
Socialmedia:url Facebook: url Instagram:<br>
Snapcode: anthony.k1ng<br>
</p>
</div>

</div>

Answer 2

From you codes, you gave the two modals the same id myModal. In html, an Id can exist only once on the page. The first modal where that Id exist will be the only one triggered as same thing goes for your buttons too. Change the individual Id of the buttons and also of the modals and then target them respectively based on the button clicked. Same thing should be done for your close button too

Change your JavaScript to this

 var modal1 = document.getElementById('myModal1');
var modal2 = document.getElementById('myModal2');
// Get the button that opens the modal
var btn1 = document.getElementById("myBtn1");
var btn2 = document.getElementById("myBtn2");

// Get the <span> element that closes the modal
var span1 = document.getElementById("close1");
var span2 = document.getElementById("close2");
// When the user clicks on the button, open the modal
btn1.onclick = function() {
    modal1.style.display = "block";
}
btn2.onclick = function() {
    modal2.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span1.onclick = function() {
    modal1.style.display = "none";
}
span2.onclick = function() {
    modal2.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal1) {
        modal1.style.display = "none";
    }
    if (event.target == modal2) {
        modal2.style.display = "none";
    }
}

And Your html to this

   <!-- Trigger/Open The Modal -->
<button id="myBtn1" class="myBtn">Anthony</button>

<!-- The Modal -->
<div id="myModal1" class="modal">

<!-- Modal content -->
<div class="modal-content">
<span class="close" id="close1">&times;</span>
<p class="Info">
Nachname:König<br>
Vorname:Anthony<br>
Geburtstag:24.12.1998<br>
Herkunft:Deutschland<br>
Adresse:xxxxxxxxxxxxxxxxx<br>
Mobilnummer:xxxxxxxxxxxxxx<br>
E-Mail:xxxxxxxxxxxxxxxxxbr>
Fachlicher Schwerpunkt:Programmieren<br>
Hobbys:Basketball, Tennis, Krafttraining, Gaming und Fussball.<br>
Socialmedia:url Facebook: url Instagram:<br>
Snapcode: anthony.k1ng<br>
</p>
</div>

</div>
 <!-- Trigger/Open The Modal -->
<button id="myBtn2" class="myBtn">David</button>

<!-- The Modal -->
<div id="myModal2" class="modal">

<!-- Modal content -->
<div class="modal-content">
<span class="close" id="close2">&times;</span>
<p class="Info">
Nachname:König<br>
Vorname:Anthony<br>
Geburtstag:24.12.1998<br>
Herkunft:Deutschland<br>
Adresse:xxxxxxxxxxxxxxxxxxxxxx<br>
Mobilnummer:xxxxxxxxxxxxxxxxxx<br>
E-Mail:xxxxxxxxxxxxxxxx<br>
Fachlicher Schwerpunkt:Programmieren<br>
Hobbys:Basketball, Tennis, Krafttraining, Gaming und Fussball.<br>
Socialmedia:url Facebook: url Instagram:<br>
Snapcode: anthony.k1ng<br>
</p>
</div>

</div>

And then the CSS /* The Modal (background) */

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    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/Box */
.modal-content {
    background-color: #fefefe;
    margin: 14% auto; /* 15% from the top and centered */
    padding: 20px;
    border: none;
    width: 80%; /* Could be more or less, depending on screen size */
        box-shadow: 0 10px 20px 0px rgba(0, 0, 0, 0.5);
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
/* Button Design */
.myBtn {
  background-image: url(/images/blank-profile-picture-973460_960_720.png);
   font-family: Lato-Bold;
   font-size: 20px;
   background-color: rgb(55, 154, 177);
   background-size:cover;
   width: 300px;
   height: 300px;
   margin: 10px;
   float: left;
   text-align: center;
   color:white;
   border:0;
   cursor: pointer;
}

p.Info {
     font-family: Lato-regular;
     font-size: 15px;
     color: rgb(40, 40, 40);


}