title: jquery .on container element attached to multiple selectors
body: <p>I am using <code>.on()</code> to attach click events to multiple elements that appear on the page dynamically. The problem I have is that when I add <code>.on</code> to a container on the page and want to attach click events to multiple elements in the container, the latter overwrites the previous. </p>
  
  <pre><code>&lt;div id="container"&gt;
     &lt;!-- elements here appear dynamically --&gt;
     &lt;div id="id1"&gt;&lt;/div&gt;
     &lt;div id="id1"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
   &lt;script&gt;
     $('#container').on("click", "#id1", function(){});
     $('#container').on("click", "#id2", function(){});
   &lt;/script&gt;
  </code></pre>
  
  <p>In the above example only the click event for id2 works. </p>
  
  <p>Is there a way around this? </p>
  
  <p>Thank you, 
  Ev.</p>