Delete entry from database using ajax and jQuery

Question

I'm making this app to practice asynchronous websites, all it does is show the contents of a database table on the site in table format using jQuery and PHP.

Everything works perfectly, except I wanted to add a button on each < tr > that on click deletes the respective entry on the database, however, I can't seem to get it done. I've got through the documentation of everything I used and just don't see the problem. Here is my code:

HTML:

<div class="row">
    <div class="col-lg-12" id="table_container">
        <table class="table table-striped" id="result_table">

        </table>
    </div>
</div>

The table is created on a separate PHP file that's called by ajax, this is the relevant loop:

while ($places = mysqli_fetch_array($result)) {
    echo "<tr>";
    echo "<td>". $places ['ID']."</td>";
    echo "<td>". $places ['NAME']."</td>";
    echo "<td>". $places ['CHAIRS']."</td>";
    echo "<td>". $places ['CREATED']."</td>";
    echo '<td>
              <button class="btn btn-default deleteWaitlist" type="submit" name="' . $places['ID'] . '">X</button>
          </td>';
    echo "</tr>";
}

All buttons are created with the correct 'name' on the final html (that is an auto_increment number).

jQuery:

$(".deleteWaitlist").click(function(){
        console.log("click on .deleteWaitlist");
        // Get the varible name, to send to your php
         var i = $(this).attr('name');
            $.post({
                url: 'deleteWaitlist.php', 
                data: { id : i}, 
                success: function(result){
                    console.log("success" + result);
                }
            });
    });

As I said, kinda new to ajax. correct me if I'm wrong: this calls deleteWaitlist.php and posts a parameter 'id' with value '$(this).attr('name')' which is an auto_increment value on the database and should be diferent for every entry.

deleteWaitlist.php

$sql = "DELETE FROM waitlist WHERE id=" . $_POST[id] . "";
mysqli_query($c,$sql);

It's pretty straightforward, isn't it? Can you help me find the mistake? Maybe something like (int)$_POST[id] somewhere? I could swear I tried that everywhere.

EDIT: Strangely, Im not even getting the console log "click on .deleteWaitlist" when I click the button, as if I weren't even clicking it at all. What can be happening? I also changed the id "deleteWaitlist" for a class, since it seems to be the best practice.

Answer 1

Seems there is multiple delete button in your output html and jQuery matches exactly one element when querying for an ID.

Try use CLASS instead of ID on the delete button.

while ($places = mysqli_fetch_array($result)) {
  echo "<tr>";
    echo "<td>". $places ['ID']."</td>";
    echo "<td>". $places ['NAME']."</td>";
    echo "<td>". $places ['CHAIRS']."</td>";
    echo "<td>". $places ['CREATED']."</td>";
    echo '<td>
      <button class="btn btn-default deleteWaitlist" type="submit" name="' . $places['ID'] . '">X</button>
    </td>';
  echo "</tr>";
}

jQuery:

$(".deleteWaitlist").click(function(){
    console.log("click on .deleteWaitlist");
    // Get the varible name, to send to your php
     var i = $(this).attr('name');
        $.post({
            url: 'deleteWaitlist.php', 
            data: { id : i}, 
            success: function(result){
                console.log("success" + result);
            }
        });
});