title: jQuery click function only works on first element
body: <p>I am having some trouble with jQuery.</p>
  
  <p>I am making a simple CMS and in the interface I have a list of pages, in each list item is an edit link. I made jQuery listen for clicks with that edit id. It will then look at the parent LI to see what id it has so the user can save the changes to the right pageId in the database.</p>
  
  <p>My List</p>
  
  <pre><code>&lt;ul id="sortable" class="ui-sortable"&gt;
      &lt;li class="sortable" id="listItem_1"&gt;
          &lt;a href="#" id="edit"&gt;edit&lt;/a&gt;
          &lt;span id="title"&gt;List item 1&lt;/span&gt;
      &lt;/li&gt;
  
      &lt;li class="sortable" id="listItem_2"&gt;
          &lt;a href="#" id="edit"&gt;edit&lt;/a&gt;
          &lt;span id="title"&gt;List item 2&lt;/span&gt;
      &lt;/li&gt;
  
      etc..
  &lt;/ul&gt;
  </code></pre>
  
  <p>And the javascript</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $('a#edit').click(function(){
          alert($(this).parent("li").attr("id"));
      })
  });
  </code></pre>
  
  <p>       </p>
  
  <p>But only the first edit link works. All the others just get ignored.
  You can see the problem working here, <a href="http://info.radio-onair.ath.cx/active/scms/admin/pages/test.html" rel="noreferrer">http://info.radio-onair.ath.cx/active/scms/admin/pages/test.html</a></p>
  
  <p>Thanks in advance.</p>