Ajax .click from list only picking up first line values - php

Question

Hi my HTML list with Buttons linked to Ajax script is only picking up on the first line.
PHP Page
<?php
$sql="SELECT * FROM scanns WHERE `site` = '$csite' AND `date` BETWEEN '$sdate' AND '$edate' ";
$result_set=mysqli_query($link,$sql);
while($row=mysqli_fetch_array($result_set))
{
?>
<tr>
<td><?php echo $row['date']; ?></td>
<td><?php echo $row['site']; ?></td>
<td><?php echo $row['file_name']; ?></td>
<td>view scann</td>
<td>
<input class='date' type='hidden' value= "<?php echo $row['date']; ?>"/>
<input class='site' type='hidden' value= "<?php echo $row['site']; ?>"/>
<input class='filename' type='hidden' value= "<?php echo $row['file_name']; ?>"/>
<input class="submit" type="button" value="Delete Scan">
</td>
<td>
<input class="stamp" type="button" value="Post File">
</td>
</tr>
<?php
}
?>
</table>
Ajax call
$(document).ready(function(){
"use strict";
$('.submit').click(function(){
var date = $('.date').val();
var site = $('.site').val();
var filename = $('.filename').val();
var dataString = 'date='+ date + '&site='+ site + '&filename='+ filename;
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "cscanndelete.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
return false;
});
$('.stamp').click(function(){
var date = $('.date').val();
var site = $('.site').val();
var filename = $('.filename').val();
var dataString = 'date='+ date + '&site='+ site + '&filename='+ filename;
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "scanstamp.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
return false;
});
});
If you click on any of the buttons it only pickups the values of the first line not sure how to fix or even if i can.

Answer 1

$('.date').val() will return the value of the first matching element. Since there are many matching elements on the page, it's always returning that first table row.
You're in the context of the $('.submit') selector, so you can use that as a starting point to traverse the DOM and find the specific element you want. Something like this:
var date = $(this).closest('tr').find('.date').val();
That should start at this (the submit button), examine up to the containing tr (which has all of the elements you're looking for in this case), and then find the matching element(s) just within that context. As long as there's only one .date element within that parent tr, it'll return the value from that one element.
In your case you may also make use of something like .prev('.date'), or only traverse up to the td instead of the tr, etc. There are a number of ways to go about it, depending on how robust it may need to be if the markup changes slightly.

Answer 2

$('.date').val()
will always return the value of the first matching element. If you want to get the value of the clicked element, you can do it like this:
$('submit').click(function(){
$(this).closest('input').find('.date').val();
$(this).closest('input').find('.site').val();
... });