How can i delete row tables in mysql with jquery?

Question

I want to delete specific rows in mysql by jquery. It works on the first row, but in the second row, nothing happens.

This is my HTML code:

     <td><p data-placement="top" data-toggle="tooltip" title="Delete">
       <button id="dele_com" class="btn btn-danger btn-xs" name="<?php echo $rows['companyID']; ?>">
        <span class="icon-trash"></span>
       </button></p>
     </td>

and this is my jquery code:

$("#dele_com").on("click", function(event) {        
 var show_id = this.name;
            alert(show_id);
            bootbox.dialog({
              message: "Are you sure you want to Delete this account ?",
              title: "<i class='icon-trash'></i> Delete !",
              buttons: {
                success: {
                  label: "No",
                  className: "btn-success",
                  callback: function() {
                     $('.bootbox').modal('hide');
                  }
                },
                danger: {
                  label: "Delete!",
                  className: "btn-danger",
                  callback: function() {
                      $.post('update_delete.php', { 'pid1':pid1 })
                      .done(function(response){
                          window.location.href= "modification.php";
                      })
                      .fail(function(){
                          bootbox.alert('Something Went Wrog ....');
                      })
                  }
                }
              }
            });
});

Answer 1

Here you have specified the id #dele_com and that will be the same for every row. So when you click on the delete button it will find the first id of your table and performs click.

You have to use class selector instead of id then it will work