JQuery confirm dialog for link only working on first in list

Question

I have the following script:

<script type="text/javascript">
$(document).ready(function() {
    $('#confirm_Group_Delete').click(function(event) {
        event.preventDefault();
        if (confirm('All loan units grouped to this group will be unlinked. Are you sure you want to DELETE this group?')) {
            var url = $(this).attr('href');
            $('#content').load(url);
        }
        else
        {
            return false;
        }
    });
});
</script>

With a table full of items:

<td>
    Item 1 <a id="confirm_Group_Delete" href='<?=$_SERVER['PHP_SELF']?>?sec=groups&action=delete&id=<?=$group['id']?>#group'>Delete</a>
    Item 2 <a id="confirm_Group_Delete" href='<?=$_SERVER['PHP_SELF']?>?sec=groups&action=delete&id=<?=$group['id']?>#group'>Delete</a>
    Item 3 <a id="confirm_Group_Delete" href='<?=$_SERVER['PHP_SELF']?>?sec=groups&action=delete&id=<?=$group['id']?>#group'>Delete</a>
</td>

The problem is the JQuery confirm script only shows up for the first item in the list - in this case Item 1. For all the other items the site deletes the item without confirming.

Any ideas?

Answer 1

The id attribute can not be the same for different elements.

Change the selector to call a class instead of id:

<script type="text/javascript">
$(document).ready(function() {
    $('.confirm_Group_Delete').click(function(event) {
        event.preventDefault();
        if (confirm('All loan units grouped to this group will be unlinked. Are you sure you want to DELETE this group?')) {
            var url = $(this).attr('href');
            $('#content').load(url);
        }
        else
        {
            return false;
        }
    });
});
</script>

And then change your html like this:

<td>
    Item 1 <a class="confirm_Group_Delete" href='<?=$_SERVER['PHP_SELF']?>?sec=groups&action=delete&id=<?=$group['id']?>#group'>Delete</a>
    Item 2 <a class="confirm_Group_Delete" href='<?=$_SERVER['PHP_SELF']?>?sec=groups&action=delete&id=<?=$group['id']?>#group'>Delete</a>
    Item 3 <a class="confirm_Group_Delete" href='<?=$_SERVER['PHP_SELF']?>?sec=groups&action=delete&id=<?=$group['id']?>#group'>Delete</a>
</td>