title: How to create a dynamic popup Jquery
body: <p>I found this Jquery mobile popup example:</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
  &lt;script src="../chui/chui-3.9.0.js"&gt;&lt;/script&gt;
  
  $(function() {      
      ///////////////////
      // Initialize Popup
      ///////////////////
      $("#openPopup").bind("singletap", function() {
        $.UIPopup({
          id: "warning",
          title: 'Attention Viewers!', 
          message: 'The performance of "Merchant of Venice", Act 4 scene 1, will begin shortly. Thank you for your patience.', 
          cancelButton: 'Skip', 
          continueButton: 'Stay', 
          callback: function() {
            var popupMessageTarget = document.querySelector('#popupMessageTarget');
            popupMessageTarget.textContent = 'Thanks for staying with us a bit longer.';
            popupMessageTarget.className = "";
            popupMessageTarget.className = "animatePopupMessage";
          }
        });
      });             
  });
  </code></pre>
  
  <p>Image element: <br />
      img src='images/Google-Maps.png' id='openPopup' /></p>
  
  <p>I have about another 10 image elements which are populated dynamically (id="openPopup", id="openPopup1",id="openPopup2",...etc). The image elements should display the popup with different contents. How can I attach the function dynamically to each element !!</p>
  
  <p>chui-3.9.0.js can be found here:
  <a href="https://github.com/sourcebits-robertbiggs/chui/blob/master/dist/chui/chui-3.9.2.js" rel="nofollow">https://github.com/sourcebits-robertbiggs/chui/blob/master/dist/chui/chui-3.9.2.js</a></p>