选择正确的变量php / javascript

I have a wishlist I built. It functions correctly with adding/displaying/remove items, but I want to take it further. When I delete an item, I want it to have a pop-up that says something like "Item X has been removed."

It's built inside an HTML table that generates the variable from a foreach.

My Problem: After it successfully deletes any item, the JS prompt will only grab the value of the first listed item.

I.E. If I click delete for any item, it will echo the variable from the first item everytime. It does however delete the correct everytime.

HTML

`echo '<tr >
                    <td >
                        '.$shirt_name.'
                    </td>
                    <td>
                        '.$model_number.'
                    </td> 
                    <td style="padding-left:9px;"><div style="height:50px;background-size:contain;" class="'.$shirt_image.'">
                       </div>
                    </td>

        ';              
         ?>
              <? echo '<td>  
              <form action="delete_button.php" method="post">
              <input type="hidden" id="deleteitem" class="testbtn" name="deleteitem" value="'.$delete_shirt. '">
              <input type="submit" id="del_but" value="Remove" class="deleteBtn">
              </form></td>                 
              ';

Javascript For brevity's sake here I'm only trying to echo the value of the input with
class="testbtn"

  <script>
$('.deleteBtn').click(function() {    
var deleteitem = $(".testbtn").val();
alert (deleteitem);
});
</script>`

So, it's only prompting the the value of the first listed <tr> instead of the relative one that I click. How do I make it grab the relative value?? I hope I made this clear enough!

try this

<script>
$('.deleteBtn').click(function() {  
var deleteitem = $(this).parent().find('.testbtn').val();
alert (deleteitem);
});
</script>

Use $(this) $(this) is the currently clicked button object. Try doing a console.log($(this)) to see what it has. If you need to select its parent row id or something do $(this).parent("tr").attr("ID")

Hope this helps! *no pun intended

Here is a template to show how you should do this.

<script>
$('.deleteBtn').click(function(e) {
   e.preventDefault();
   if (window.confirm("Are you sure you want to delete?")) {
       // do ajax to delete on the server
       $(this).closest("tr").remove();

   }
});
</script>

To dissect this line $(this).closest("tr").remove();

$(this) inside of a handler will return the element that received the event

.closest("tr") will give you the first ancestor that matches the selector tr

.remove() will remove the dom node.

Update

Look at my code and look at the other two items and try and stick them together.

You really need to refactor this code, why would you have the button wrapped wrong a form when your doing a click event using javascript. if you do something like this it would be better:

<?php
    echo "<tr>
        <td>
            $shirt_name
        </td>
        <td>
            $model_number
        </td> 
        <td style=\"padding-left:9px;\">
            <div style=\"height:50px;background-size:contain;\" class=\"$shirt_image\"></div>
        </td>
        <td class=\"testbtn\" id=\"$model_id\">
            Delete
        </td>";              
?>

 <script>
$('.deleteBtn').click(function() {
var id = $(this).attr('id');

// DO SOME AJAX AND PUT THE ALERT IN THE SUCCESS

alert ('Deleted' + id);
});
</script>

Is there a "delete button" form for each shirt in the list? If so, then you can add the alert() call to the submit button, like this:

<form>
    <input type="submit" onclick="alert('Click!'); return true;">
</form>