PHP Ajax从表中删除记录

Question

Some strange problem occurred. I am trying to delete a record from a table by using AJAX but whenever I click the delete button it is sending the ID of the last row in the table each time instead of that specific ID which I want to delete to my delete-process.php page. Now I checked that the PHP page and codes are just working fine. When I did console.log(dataString) I got to see that no matter which Delete button I click I get the ID of the last field only.

Code

<table class="table table-hover table-striped">
              <thead>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Date</th>
                <th>Action</th>
              </thead>
              <tbody>
                <?php while($si = $stmt->fetch()){ extract($si); ?>
                <tr>
                  <td><?php echo $ct_id; ?></td>
                  <td><?php echo $ct_name; ?></td>
                  <td><?php echo $ct_email; ?></td>
                  <td><?php echo $ct_phone; ?></td>
                  <td><?php echo date('jS M, Y (h:i a)', strtotime($ct_date)); ?></td>
                  <td>
                    <form method="post" action="">
                      <a href="view-msg.php?id=<?php echo $ct_id; if(!empty($_GET['ids'])){ ?>&ids=<?php echo $_GET['ids']; } ?>" class="btn btn-info btn-fill">View</a>
                      <input type="text" value="<?php echo $ct_id; ?>" class="ctid">
                      <input type="submit" value="Delete" class="btn btn-danger btn-fill delete">
                    </form>
                  </td>
                </tr>
                <?php } ?>
              </tbody>

AJAX

$(document).ready(function() {
  $(".delete").click(function() {
    var dataString = {
      id: $(".ctid").val()
    };
    console.log(dataString);
    var $submit = $(this).parent().find('.delete');
    $.confirm({
      title: 'Confirm!',
      content: 'Are you sure you want to delete this message?',
      buttons: {
        confirm: function () {
          $.ajax({
            type: "POST",
            //dataType : "json",
            url: "delete-process.php",
            data: dataString,
            cache: true,
            beforeSend: function(){
              $submit.val("Please wait...");
            },
            success: function(html){
              $('.message').html(html);
              if($('.message').find('#responseBox').hasClass('alert-success')){
                $.alert(html);
                setTimeout(function(){
                  window.location.replace("support.php<?php if(!empty($_GET['ids'])){ ?>?ids=<?php echo $_GET['ids']; } ?>");
                },2000);
              }
            }
          });
        },
        cancel: function(){}
      }
    });
    return false;
  });
});

I did not include PHP code because the error is detected in console.log(dataString) as every button clicked is sending the same ID. Please help.

Answer 1

$(".ctid") will return an array containing all of the elements with that class.

You are only interested in the sibling to the clicked button so you should use $(this).prev().

$(this) will reference the clicked button. .prev() selects the immediately proceeding sibling.

$(".delete").click(function() {
    var dataString = {
      id: $(this).prev().val()
    };
    ...
});