javascript - Why alert works only on first row?

Question

I use Zebra Dialog and I'm trying to make an alert set off every time a Delete is clicked. The alert is only working when I click Delete in the first row. All rows below it does not work and I dont know why?

<table>              
     <tr>
        <td>Example1</td>
        <td><a id="delete" href="#">Delete</a></td>
     </tr>
        <td>Example1</td>
        <td><a id="delete" href="#">Delete</a></td>
     </tr>
        <td>Example1</td>
        <td><a id="delete" href="#">Delete</a></td>
     </tr>
</table>

<script>
$(document).ready(function(){
    $("#delete").bind("click",function(e){
        e.preventDefault();
        $.Zebra_Dialog("Do you want to delete?",{
            type : "question",
            title: "Question"
        });
    });
});
</script>

Answer 1

Id's must be unique.That's creating problems here.So to make your code work make some small changes by changing it's to class.

change mark up to

<table>              
     <tr>
        <td>Example1</td>
        <td><a class="delete" href="#">Delete</a></td>
     </tr>
        <td>Example1</td>
        <td><a class="delete" href="#">Delete</a></td>
     </tr>
        <td>Example1</td>
        <td><a class="delete" href="#">Delete</a></td>
     </tr></table>

then in jquery

<script>
  $(document).ready(function(){
     $(".delete").bind("click",function(e){  <-----  class selector
     e.preventDefault();
     $.Zebra_Dialog("Do you want to delete?",{
      type:"question",
      title:"Question"
    })
    //  send an ajax request here based up on the user selection 

  });
});
</script>

If you are a beginner please go through the standard guide here.