PHP Ajax从表中删除记录

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.

$(".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()
    };
    ...
});

Of course it is selecting the same ctid since you don't distinguish between forms. You can distinguish like this:

var dataString = {
      id: $(this).closest('form').find('.ctid').val()
    };

"closest" navigates to the form and then find the ctid that is contained in the form.

When you do this:

$(".ctid").val()

Which matching element are you expecting? The code doesn't specify, and ".ctid" matches multiple elements. But since it can only return a single value, it's simply returning the last matching one. Essentially, you need to specify which matching element you want.

One way to do this is by navigating the DOM from the clicked button to the nearest matching element. Perhaps by navigating up to a single common parent element and then finding the target element therein. Something like this:

$(this).closest("form").find(".ctid").val()

Starting from the clicked element which raised the event (this), it navigates up to the containing <form> and then searches for the matching ".ctid" within that form. Then gets the value from only that element.

As you are creating the table rows using loop so the class ctid is repeated. so when you are accessing this like this id: $(".ctid").val(). It will return all the elements having class ctid. So change your script like this

var dataString = {
  id: $(this).siblings('.ctid').val()
};

You can inspect to check each button value is getting unique or not You can achieve that without using ajax use below code

<a href="delete-process.php?id=value of id" onclick="return confirm('Are you sure you want to delete ?')"> Delete </a>