title: dynamic modals when i click on dynamic buttons
body: <p>I, i'm new here so i don't really know mutch, but i need to figure out this thing:
  i have a php page with some dynamic buttons.</p>
  
  <p>I want this dynamic buttons to open a modal with dynamic content but I can't figure out why it doesn't work.</p>
  
  <p>As you can see from my test site <a href="http://www.tecmasolutions.com/clients/home-configurator/mono/dimensioni.php?style=Smart" rel="nofollow noreferrer">here</a>, if you click on the first button it will display the modal with correct content, but if you click on the second button (dinamically generatated) it doesn't display anyting.</p>
  
  <p>here's my code, but it's more simple to understand trough the previous link;</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;!------------------------------------------- ATTIVAZIONE MODAL---------------------------------&gt;
  
      &lt;script&gt;
  // Get the modal
  var modal = document.getElementById('myModal');
  
  // Get the button that opens the modal
  var btn = document.getElementById("&lt;?php echo $mq_solarium; ?&gt;");
  
  // Get the &lt;span&gt; element that closes the modal
  var span = document.getElementsByClassName("chiudi_dimensione")[0];
  
  // When the user clicks the button, open the modal 
  btn.onclick = function() {
      modal.style.display = "flex";
  }
  
  // When the user clicks on &lt;span&gt; (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";
      }
  }
  &lt;/script&gt;
  &lt;!-------------------------------------------FINE ATTIVAZIONE MODAL---------------------------------&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.plan-wrapper {
  
      border: 3px solid #73AD21;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="hero-wrapper dimensioni"&gt;
  &lt;?php
      //estraggo i valori per smart
      $query=mysqli_query($con, " SELECT * FROM appartamenti INNER JOIN moduli ON appartamenti.id_planimetria = moduli.id_planimetria  WHERE taglio='monolocale' AND visibile='1' "); 
  
  ?&gt;
  
       
                 
    &lt;div id="myBtn"class="plan-wrapper"&gt;click me&lt;/div&gt;
  
    &lt;div style="background-color:DodgerBlue;" id="myModal" class="lightbox_wrapper_dimensione"&gt;
      &lt;div id="close" class="chiudi_dimensione"&gt;X(close)&lt;/div&gt;
      some variables from php
    &lt;/div&gt;
  &lt;/div&gt;
   
   &lt;?php       
  }
      }
      else {
      // redirect user to another page
      header( "Location: ../index.php" ); die;
          }
  ?&gt; 
   
   &lt;!------------------------------------------- CHIUSURA PHP---------------------------------&gt;   
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>