我按了什么javascript代码才能让我的模态打开？

Question

我已经到达了一个绊脚石，无法弄清楚我在Javascript中缺少什么，以便在单击按钮时打开每个模态框。现在，第一个按钮工作并调出我的照片1，但其余的除了悬停属性外没有做任何其他事情。我试图添加不同的类，容器，并在线查看我是否能找到我的问题。我确定这可能是我忘记的简单事情。

这是我的代码笔：

https://codepen.io/benjamin-schneider82/pen/qKbZzg

＆＃13;

＆＃13;

// Animate smooth scroll

$('#view-work').on('click', function() {
  const images = $('#images').position().top;

  $('html, body').animate({
      scrollTop: images
    },
    900
  );
});

// Get modal element
var modal = document.getElementById('simpleModal');

// Get open modal button
var modalBtn = document.getElementById('modalBtn');


// Get close button
var closeBtn = document.getElementsByClassName('closeBtn')[0];

// Listen for open click
modalBtn.addEventListener('click', openModal);

// Listen for close click
closeBtn.addEventListener('click', closeModal);

// Listen for Outside click
window.addEventListener('click', clickOutside);



// Function to open modal
function openModal() {
  modal.style.display = 'block';
}

// Function to close modal
function closeModal() {
  modal.style.display = 'none';
}

// Function to close modal if outside click
function clickOutside(e) {
  if (e.target == modal) {
    modal.style.display = 'none';
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="landing-image"></div>
<div id="images">
  <div id="header">
    <h2>My Projects</h2>
  </div>

  <div class="container">
    <button id="modalBtn" class="button"><img src="https://source.unsplash.com/1600x900/?nature,water" alt=""></button>
    <div id="simpleModal" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <span class="closeBtn">&times;</span>
          <a href="http://www.developitben.com">
            <h2>Photo One</h2>
          </a>
        </div>
        <div class="modal-body">
          <img src="https://source.unsplash.com/1600x900/?nature,water" alt="">
        </div>
        <div class="modal-footer">
          <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, cupiditate.</h3>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <button id="modalBtn" class="button"><img src="https://source.unsplash.com/1600x900/?nature,water" alt=""></button>
    <div id="simpleModal" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <span class="closeBtn">&times;</span>
          <h2>Photo Two</h2>
        </div>
        <div class="modal-body">
          <img src="https://source.unsplash.com/1600x900/?nature,water" alt="">
        </div>
        <div class="modal-footer">
          <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, cupiditate.</h3>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <button id="modalBtn" class="button"><img src="https://source.unsplash.com/1600x900/?nature,water" alt=""></button>
    <div id="simpleModal" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <span class="closeBtn">&times;</span>
          <h2>Photo Three</h2>
        </div>
        <div class="modal-body">
          <img src="https://source.unsplash.com/1600x900/?nature,water" alt="">
        </div>
        <div class="modal-footer">
          <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, cupiditate.</h3>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <button id="modalBtn" class="button"><img src="https://source.unsplash.com/1600x900/?nature,water" alt=""></button>
    <div id="simpleModal" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <span class="closeBtn">&times;</span>
          <h2>Photo Four</h2>
        </div>
        <div class="modal-body">
          <img src="https://source.unsplash.com/1600x900/?nature,water" alt="">
        </div>
        <div class="modal-footer">
          <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, cupiditate.</h3>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <button id="modalBtn" class="button"><img src="https://source.unsplash.com/1600x900/?nature,water" alt=""></button>
    <div id="simpleModal" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <span class="closeBtn">&times;</span>
          <h2>Photo Five</h2>
        </div>
        <div class="modal-body">
          <img src="https://source.unsplash.com/1600x900/?nature,water" alt="">
        </div>

＆＃13;

＆＃13;

＆＃13;

感谢您的时间！

本