Удалить изображение, которое показывают с glob() с помощью ajax

Question

Как я могу дать конкретный идентификатор приращения для div.pix-box как pix-1, pix-2,..., чтобы удалить их с помощью AJAX?

$images = glob("user/$username/"."*.{jpg,jpeg,gif,png}",GLOB_BRACE);
    foreach($images as $image) {
        echo '<div class="pix-box"><img src="'.$image.'" />'.'<br>';
        echo '<form class="remover" action="admin-delete.php" method="post">';
        echo '<input type="hidden" value="'.$image.'" name="delete_file" />';
        echo '<input type="submit" name="submit" value="Delete image" />';
        echo '</form>';
        echo '</div>';
    }

и это мой сценарий ajax:

$(".remover").on('submit',(function(d) {
    d.preventDefault();
    $.ajax({
      url: "admin-delete.php",
      type: "POST",
      data:  new FormData(this),
      contentType: false,
          cache: false,
      processData:false,
      success: function(data)
        {
                $('#pix-....').remove();

        },
        error: function() 
        {
        }           
     });

и admin-delete.php:

<?php
if (array_key_exists('delete_file', $_POST)) {
  $filename = $_POST['delete_file'];
  if (file_exists($filename)) {
    unlink($filename);
    echo 'File '.$filename.' has been deleted';
  } else {
    echo 'Could not delete '.$filename.', file does not exist';
  }
}
?>

Answer 1

Добавьте инкрементную переменную:

$i = 1;

foreach($images as $image) {
    ...
    $i++;
}

Теперь вы можете использовать $i добавить уникальный суффикс к любому идентификатору, который вы хотите.