选择正确的变量php / javascript

Question

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!

Answer 1

try this

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