do not close my modals

I'm trying this:

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

  <!-- Modal content -->
  <div class="modal-content" >
    <div class="modal-header">
      <span class="close">&times;</span>
    </div>
 <div class="modal-body">
<div style="float: left;
  width: 33.33%;
  margin-bottom: 16px;
  padding: 0 8px;">
<img src="ad.jpg" alt="vivete" style="width:100%"/>
</div>
<div style="float: left;
  width: 66.66%;
  margin-bottom: 16px;
  padding: 0 8px;">
        <p style="font-family:SFProDisplay-Ultralight; font-size:24px;">Recibe</p>    

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

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
    </div>
    <div class="modal-body">
<div style="float: left;
  width: 33.33%;
  margin-bottom: 16px;
  padding: 0 8px;"><img src="pmac.jpg" alt="vivete" style="width:100%"/>
</div>

<div>
<div style="float: left;
  width: 66.66%;
  margin-bottom: 16px;
  padding: 0 8px;">
        <p style="font-family:SFProDisplay-Ultralight; font-size:24px;">Estamos</p><a href=rh.html><button class="button button1">Cuenta Regresiva</button></p></a>

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

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
    </div>
 <div class="modal-body">
<div style="float: left;
  width: 33.33%;
  margin-bottom: 16px;
  padding: 0 8px;">
      <img src="pmac.jpg" alt="vivete" style="width:100%"/>
</div>
<div style="float: left;
  width: 66.66%;
  margin-bottom: 16px;
  padding: 0 8px;">
        <p style="font-family:SFProDisplay-Regular; font-size:12px; opacity:0.6">hola</p>
      </div>
    </div>
  </div>
</div></div></div></div>

</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');

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


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

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

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


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


// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {
    if (event.target == modal1) {
        modal1.style.display = "none";
    }
}
// Get the modal
var modal2 = document.getElementById('myModal2');

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


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

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

but only one of them works the others not