title: Modal inside a loop wordpress
body: <p>I've been reading about this and trying different things without success. I have a loop with different posts and I have a button that when I press on it there is a modal opened to share the post.</p>
  
  <p>I was trying to add a unique ID to each modal so when I click on it open the correct modal with the correct share links. However is not working.</p>
  
  <p>This is the code I am using inside my modal:</p>
  
  <pre><code>&lt;a id="myBtn-&lt;?php echo $post_id; ?&gt;" href="#"&gt;&lt;span class="share-text"&gt;Compartir&lt;/span&gt;&lt;/a&gt;
  
  &lt;!-- The Modal --&gt;
  &lt;div id="myModal-&lt;?php echo $post_id; ?&gt;" class="modal-share"&gt;
  &lt;!-- Modal content --&gt;
  &lt;div class="modal-share-content"&gt;
  &lt;div class="wrapper"&gt;
    &lt;div class="modal-share-header"&gt;
      &lt;span class="close-share"&gt;&amp;times;&lt;/span&gt;
      &lt;h2&gt;¿Dónde quieres compartirlo?&lt;/h2&gt;
      &lt;h3&gt;&lt;?php the_title(); ?&gt;&lt;/h3&gt;
      &lt;div class="date"&gt;&lt;?php 
          $dateformatstring = "D d M";
          $unixtimestamp = strtotime(get_field('fecha'));
          echo date_i18n($dateformatstring, $unixtimestamp);
          ?&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      &lt;ul&gt;
        &lt;li class="mobile-only"&gt;&lt;a class="share-whatsapp" target="_blank" href="whatsapp://send?text=&lt;?php the_permalink(); ?&gt;" data-action="share/whatsapp/share"&gt;&lt;i class="fa fa-whatsapp" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="mobile-only"&gt;&lt;a class="share-messenger" target="_blank" href="fb-messenger://share?link=&lt;?php the_permalink(); ?&gt;"&gt;&lt;i class="fa fa-comment" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt; 
        &lt;li class="desktop-only"&gt;&lt;a class="share-messenger" target="_blank" href="https://www.facebook.com/dialog/send?app_id=1385443625036469&amp;redirect_uri=http://www.fanonfire.com/gracias-por-compartir/&amp;display=popup&amp;link=&lt;?php the_permalink(); ?&gt;"&gt;&lt;i class="fa fa-comment" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt; 
        &lt;li class="fb"&gt;&lt;a class="share-facebook" target="_blank" href="http://www.facebook.com/sharer.php?u=&lt;?php the_permalink(); ?&gt;"&gt;&lt;i class="fa fa-facebook" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt; 
        &lt;li class="tw"&gt;&lt;a class="share-twitter" target="_blank" href="https://twitter.com/share?url=&lt;?php the_permalink(); ?&gt;&amp;amp;lang=es&amp;amp;text=Vente a &lt;?php the_title(); ?&gt; en Madrid via @fanonfire"&gt;&lt;i class="fa fa-twitter" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;  
      &lt;/ul&gt;
     &lt;/div&gt;
    &lt;/div&gt;  
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the script:</p>
  
  <pre><code>&lt;script&gt;
  var modal = document.getElementById('myModal-&lt;?php echo $post_id; ?&gt;');
  var btn = document.getElementById("myBtn-&lt;?php echo $post_id; ?&gt;");
  var span = document.getElementsByClassName("close-share")[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";
  }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>So as I understand when I click on the for example myBtn-1 I must get the modal myModal-1. However I get always the last modal of all my available posts and looking at my code is "working fine".</p>
  
  <p>Any idea?
  Thank you! </p>