title: Multiple uses of ID to open pop up box
body: <p>I've used this <a href="https://www.w3schools.com/howto/howto_css_modals.asp" rel="nofollow noreferrer">tutorial</a> to build a pop up box with a contact form however i want to use this in multiple places without duplicating the code and changing the ID's for each button</p>
  <p>any advice would be appreciated if you need anymore information please let me know ill edit the question</p>
  <p><a href="http://live.homesmartenergy.co.uk/" rel="nofollow noreferrer">here is my site ive added the id to both the slider links</a></p>
  <p>this is my pop up box and button</p>
  <pre><code> &lt;button id=&quot;myBtn&quot; class=&quot;btn btn-light&quot;&gt;
     click here
    &lt;/button&gt;
      
      &lt;div id=&quot;myModal&quot; class=&quot;modal&quot;&gt;
      
        &lt;!-- Modal content --&gt;
        &lt;div class=&quot;modal-content&quot;&gt;
          &lt;span class=&quot;close&quot;&gt;&amp;times;&lt;/span&gt;
          &lt;?php echo do_shortcode('[wpforms id=&quot;439&quot;]'); ?&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>here is my javascript</p>
  <pre><code>// Get the modal
  var modal = document.getElementById(&quot;myModal&quot;);
  
  // Get the button that opens the modal
  var btn = document.getElementById(&quot;myBtn&quot;);
  
  // Get the &lt;span&gt; element that closes the modal
  var span = document.getElementsByClassName(&quot;close&quot;)[0];
  
  // When the user clicks on the button, open the modal
  btn.onclick = function() {
    modal.style.display = &quot;block&quot;;
  }
  
  // When the user clicks on &lt;span&gt; (x), close the modal
  span.onclick = function() {
    modal.style.display = &quot;none&quot;;
  }
  
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = &quot;none&quot;;
    }
  }
  </code></pre>