jQuery .bind only working on first element - php

Question

I am trying to create a jQuery function that will allow me to add, edit, and delete articles on my site. Right now, I am trying to write the delete functionality. Basically, when the delete button is clicked, it will send the id of that specific article to a php script via ajax request. It gets the article ID from the ID attribute of the article element.
My problem is, that when the Delete button is clicked I get an alert box with the article ID on the first article, but not on the rest.
Here is my code:
HTML/PHP:
<div id="contentLeft">
<?php
foreach($data->blogPosts as $post){
?>
<article id="<?php print $post->ID; ?>" class="article">
<div id="options">
<div id="edit"><a class="btn btn-danger" href="#" id="editButton"><i class="fa fa-pencil"> Edit</i></a></div>
<div id="delete"><a class="btn btn-danger" href="#" id="deleteButton"><i class="fa fa-trash-o">Delete</a></i></div>
</div>
<div id="articleTitle"><?php echo $post->Title; ?></div>
<div id="content">
<?php echo $post->Content; ?>
</div>
<div id="date"><?php echo date('F jS, Y', strtotime($post->Date)); ?></div>
</article>
<?php
}
?>
</div>
My jQuery:
$("#deleteButton").bind('click', function(){
var id = $("article").closest("article").attr("id");
alert(id);
});
I appreciate the help!

Answer 1

In a given document ids should be unique; no more than one element should have the same ID. Please change your id's to classes and change your js accordingly:
HTML
<a class="btn btn-danger deleteButton" href="#"> ....
JS
$(".deleteButton").bind('click',...

Answer 2

You can add only one element with the same id.
Probably you should change id to class:
<div class="delete"><a class="btn btn-danger" href="#" class="deleteButton"><i class="fa fa-trash-o">Delete</a></i></div>
and in your js code:
$(".deleteButton").bind(...)