only first row is getting deleted while the other data is not - php

Question

When I click on the delete modal of first row, the modal pops up and the data is getting deleted. If I click on the row other than the first row, it shows the error as id undefined.
Controller:
public function project_show(){
$this->load->view('project_show',$data);//page where delete button is present
$this->load->view('project_del');//modal page which opens on delete button
}
public function delete_get_id($pcode){
if($this->input->post('deleteproj'))
{
$this->project_model->delete_project($pcode);
}
}
ajax:
$('#deletebutton').click(function(){
var pcode = $(this).data('id');
$('#deleteproject').data('id', pcode);
});
$('#deleteproject').click(function(){
var pcode = $(this).data('id');
$('#deletemodal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
console.log(pcode);
$.ajax({
type: "POST",
url: "<?php echo base_url(); ?>" + "index.php/project/delete_get_id/"+ pcode,
data: {
pcode: pcode,
deleteproj: 1,
},
success: function (data) {
$("#deletemodal").modal('hide');
showproject();
}
});
});
view page of button:
<button id="deletebutton" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deletemodal" data-id="<?php echo $row->project_code;?>"><span class = "fa fa-trash-o"></span> Delete</button>
view page of modal:
<div class="modal fade bs-example-modal-sm" id="deletemodal" ...>
.....
<button class="btn btn-danger btn delete" id="deleteproject"><span class="glyphicon glyphicon-trash"></span>Delete</button>
How will I pass the id along with "data-target" tag from page where button is present to modal page so that the particular row gets deleted

Answer 1

Please note that ID selector is supposed to be unique in a HTML document. And jQuery expects that to be true. So instead of using ID, you should use class name for the delete button
$('.deletebutton').click(function(){
var pcode = $(this).data('id');
$('#deleteproject').data('id', pcode);
});
//...
<button
class="deletebutton btn btn-danger btn-xs"
data-toggle="modal"
data-target="#deletemodal"
data-id="<?php echo $row->project_code;?>"
>
<span class = "fa fa-trash-o"></span> Delete
</button>
Assuming your showproject() function won't accidentally remove / recreate your #deleteproject button, things should work for you.