Multiple modals within the same html page

Question

Basically, I have 2 Modals and I want to display them. But when I try to display the second one it does not show up and when I click on the first button the second one shows up. When I close the second Modal the first one shows up and I can't close the first one. I am a beginner at this so I do not really know anything, any links to posts similar to this would be appreciated. This is the HTML code:

  <div id= "Modal1" class="modal1">
    <div class="modal-content">
      <span class="close1">&times;</span>
      <img class="modal-image" src="vb1.png">
      <Strong>Product 1</Strong>
      <h5>Price: 8.00€</h5>
      <h5>About: This product</h5>
      <h5>Payment Methods: PayPal</h5>
    </div>

    <script>
    var modal1 = document.getElementById('Modal1');
    var btn1 = document.getElementById("vb1");
    var span = document.getElementsByClassName("close1")[0];
    btn1.onclick = function() {
      modal1.style.display = "block";
    }
    span.onclick = function() {
      modal1.style.display = "none";
    }
    window.onclick = function(event) {
      if (event.target == modal1) {
        modal1.style.display = "none";
      }
    }
    </script>

    <div id= "Modal2" class="modal2">
      <div class="modal-content">
        <span class="close2">&times;</span>
        <img class="modal-image" src="vb2.png">
        <Strong>Product 2</Strong>
        <h5>Price: 17.00€</h5>
        <h5>About: This product</h5>
        <h5>Payment Methods: PayPal</h5>
      </div>

      <script>
      var modal2 = document.getElementById('Modal2');
      var btn2 = document.getElementById("vb2");
      var span2 = document.getElementsByClassName("close2")[0];
      btn2.onclick = function() {
        modal2.style.display = "block";
      }
      span.onclick = function() {
        modal2.style.display = "none";
      }
      window.onclick = function(event) {
        if (event.target == modal2) {
          modal2.style.display = "none";
        }
      }
      </script>

And this is the CSS Code:

    .modal1 {
    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: rgba(0,0,0,0.4)
}

.modal2 {
    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: rgba(0,0,0,0.4)
}

.modal-image{
  margin-right:1rem;
  width:20%;
  height: auto;
  border: 1px solid darkorange;
  border-radius: 10px;
  float:left;
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 500px;
}

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

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

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

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

And the code that opens the Modals:

<div class="item-1">
        <div class="shop-product"id="vb1">
          <img src="vb1.png"  alt="" class="product">
          <h4>Product 1</h4>
          <div class="product-price">
            <ins>8.00€</ins> <del>10.00€</del>
          </div>
        </div>
      </div>
      <div class="item-2">
        <div class="shop-product" id="vb2">
          <img src="vb2.png"  alt="" class="product">
          <h4>Product 2</h4>
          <div class="product-price">
            <ins>17.00€</ins> <del>25.00€</del>
          </div>
        </div>
      </div>

And the CSS:

.product-price{
  Color: white;
  text-align: center;
  width: 100%;
  font-size: 20px;
}

.shop-product{
  Color: white;
  text-align: center;
  font-size: 25px;
}

.item-1{
  background-color: rgba(0, 0, 0, 0.45);
    border: 1px solid darkorange;
  border-radius: 10px;
  padding: 10px;
  float: left;
}

.item-1:hover{
  background-color: rgba(0, 0, 0, 0.85);
  transition: all 0.2s ease-in;
  cursor:pointer;
}

.item-2{
  background-color: rgba(0, 0, 0, 0.45);
  border: 1px solid darkorange;
  border-radius: 10px;
  padding: 10px;
  margin-left: 15px;
  float: left;
}

.item-2:hover{
  background-color: rgba(0, 0, 0, 0.85);
  transition: all 0.2s ease-in;
  cursor:pointer;
}

.row-shop-1{
  padding-top: 2%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) ;
}

.product{
  width:150px;
  height: auto;
}

.shop{
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 1900px;
  margin-left: 0px;
  margin-top: 0px;
}

Answer 1

Your span var had two event onclick listeners attached to the same element, so I changed the 2nd one to span2. There were also two onclick listeners for the window, so it was only using the 2nd one. So I rolled these into one:

 var modal1 = document.getElementById('Modal1'); var btn1 = document.getElementById("vb1"); var span = document.getElementsByClassName("close1")[0]; var modal2 = document.getElementById('Modal2'); var btn2 = document.getElementById("vb2"); var span2 = document.getElementsByClassName("close2")[0]; function start() { btn1.onclick = function() { modal1.style.display = "block"; } span.onclick = function() { modal1.style.display = "none"; } window.onclick = function(event) { if (event.target == modal1) { modal1.style.display = "none"; } else if (event.target == modal2) { modal2.style.display = "none"; } } btn2.onclick = function() { modal2.style.display = "block"; } span2.onclick = function() { modal2.style.display = "none"; } } window.onload = start(); 

 .close2:hover, .close2:focus { color: #000; text-decoration: none; cursor: pointer; } .modal1 { 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: rgba(0, 0, 0, 0.4) } .modal2 { 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: rgba(0, 0, 0, 0.4) } .modal-image { margin-right: 1rem; width: 20%; height: auto; border: 1px solid darkorange; border-radius: 10px; float: left; } .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 500px; } .close1 { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close1:hover, .close1:focus { color: #000; text-decoration: none; cursor: pointer; } .close2 { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } 

 <button id="vb1">Modal1</button> <button id="vb2">Modal2</button> <div id="Modal1" class="modal1"> <div class="modal-content"> <span class="close1">&times;</span> <img class="modal-image" src="vb1.png"> <Strong>Product 1</Strong> <h5>Price: 8.00€</h5> <h5>About: This product</h5> <h5>Payment Methods: PayPal</h5> </div> </div> <div id="Modal2" class="modal2"> <div class="modal-content"> <span class="close2">&times;</span> <img class="modal-image" src="vb2.png"> <Strong>Product 2</Strong> <h5>Price: 17.00€</h5> <h5>About: This product</h5> <h5>Payment Methods: PayPal</h5> </div> </div>