title: How do i create a modal box for each wordpress post in a foreach loop?
body: <p>I hope some of you can help me with this, as it is the last thing i need to complete my project for my last exam.
  I am creating a custom wordpress theme, where i am showing all my posts using a foreach loop. Right now, only a div box with a thumbnail picture, the creation date and title are showing for each post, but i want to be able to open a modal box here you can read the post description, when you click a image.
  Of course the correct modal box should open according to which post you click.</p>
  
  <p>Right now only the newest post is opening in a modal box.</p>
  
  <p>My code right now looks like this </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="frontNews"&gt;
    &lt;h2 class="center"&gt;NYHEDER&lt;/h2&gt;
     &lt;div class="news-list"&gt;
      &lt;?php $latest_post = get_posts( 'numberposts=4' ); ?&gt;
      &lt;?php foreach( $latest_post as $post ) : setup_postdata( $post ); ?
  &gt;
            &lt;?php $thumb = wp_get_attachment_image_src( 
  get_post_thumbnail_id($post-&gt;ID), 'full' );?&gt;
             &lt;div class="news-post" id="myBtn"&gt;
             &lt;div class="thumbnail-img" style="background-image: url('&lt;?
  php echo $thumb['0'];?&gt;')"&gt;
             &lt;div class="black"&gt;
             &lt;?php the_post_thumbnail(); ?&gt;
             &lt;div class="news-headline"&gt;
             &lt;small class="time"&gt;&lt;?php the_time('j. F Y') ?&gt;&lt;/small&gt;
             &lt;h3&gt;&lt;?php the_title(); ?&gt;&lt;/h3&gt;
              &lt;/div&gt;
                 &lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
             &lt;div id="myModal" class="modal"&gt;
  
              &lt;!-- Modal content --&gt;
              &lt;div class="modal-content"&gt;
              &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
              &lt;p&gt;Some text in the Modal..&lt;/p&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;?php endforeach; ?&gt;
      &lt;?php wp_reset_query(); ?&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>var modal = document.getElementById('myModal');
  
  var btn = document.getElementById("myBtn");
  
  var span = document.getElementsByClassName("close")[0];
  
  btn.onclick = function() {
      modal.style.display = "block";
  }
  
  span.onclick = function() {
      modal.style.display = "none";
  }
  
  window.onclick = function(event) {
      if (event.target == modal) {
          modal.style.display = "none";
      }
  }
  </code></pre>