多个模态框被覆盖

Question

我有一个简单而又令人困惑的问题。我有两个模式框，在我的页面中有两个单独的ID。它是一个简单的注册和登录。在它背后的思考是，如果我使用相同的代码但是改变id以单独定位它们会使事情按照我希望它们完成工作的方式工作，但每当我修改内容时它们看起来都是相同的。我有点怀疑事情出在哪里但我需要一些指导。请帮助一个女孩。

HTML

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

  <!-- Modal content 1 -->
  <div class="modal-content">
    <span class="close">&times;</span>
 <p>Registration FORM WILL GO HERE..</p>
  </div>

</div>
<!-- The Modal 2-->

<div id="myModal2" class="modal">

  <!-- Modal content 2 -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>LOGIN FORM WILL GO HERE..</p>
  </div>

</div>

SCRIPT

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

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

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

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

// When the user clicks 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";
    }
}
</script>