问同一个html页面中的多个模态

EN

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

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

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

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