Updating table rows using Jquery using select dropdown - php

Question

I am trying to update some table rows (there can be 40-50 rows) generated from a MYSQL query with a Approve/Rejected column at the end of each row, I would like to use jQuery to update the row using a select dropdown, the problem I am having is that it only updates the first row.
I have tried to look at other Stackoverflow threads, there seems to be quite a few with similar issues, but I am still trying to get my head around jQuery so I couldn't work out how to do it.
I am guessing it's because of the same class names?
My HTML table/forms
<table>
<tr>
<td>1</td>
<td>Ren</td>
<td>
<form method="post" action="" class="dangermouse">
<div class="form-group">
<select name="approval" class="approval">
<option value="0">Approved</option>
<option value="1">Reject</option>
</select>
</div>
<input type="hidden" name="id" value="1">
<input type="button" name="updaterow" class="save_button" value="Update">
</form>
</td>
</tr>
<tr>
<td>2</td>
<td>Stimpy</td>
<td>
<form method="post" action="" class="dangermouse">
<div class="form-group">
<select name="approval" class="approval">
<option value="0">Approved</option>
<option value="1">Reject</option>
</select>
</div>
<input type="hidden" name="id" value="2">
<input type="button" name="updaterow" class="save_button" value="Update">
</form>
</td>
</tr>
</table>
jQuery:
$('.save_button').click(function() {
var approval = $('.approval').val();
var id = $('.id').val();
$('.save_status').text('loading...');
$.post('updateRow.php',{
approval: approval,
id: id
}, function(data) {
$('.save_status').text(data);
}
);
});
PHP File:
if(isset($_POST['approval'],$_POST['id'])) {
$approval = $_POST['approval'];
$id = $_POST['id'];
if($approval !="" && $id !="") {
$pdo->ApproveOrDeny($approval, $id);
} else {
echo "The same thing we do every night, Pinky - try to take over the world!";
}
}
Thanks in advance.

Answer 1

You need to access the clicked form values .instead of just using class name
1) Setup unique name for each form
2) Access the value using form name like this $('form[name="form1"]>.id').val()
$('.save_button').click(function() {
var form = $(this).parents('form:first').attr('name');
alert(form);
var id = $('form[name="'+form+'"]>.id').val();
var option =$('form[name="'+form+'"] .approval').val();
alert(id);
alert(option);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>Ren</td>
<td>
<form method="post" name="form1" action="" class="dangermouse">
<div class="form-group">
<select name="approval" class="approval">
<option value="0">Approved</option>
<option value="1">Reject</option>
</select>
</div>
<input type="hidden" class="id" value="1">
<input type="button" name="updaterow" class="save_button" value="Update">
</form>
</td>
</tr>
<tr>
<td>2</td>
<td>Stimpy</td>
<td>
<form method="post" name="form2" class="dangermouse">
<div class="form-group">
<select name="approval" class="approval">
<option value="0">Approved</option>
<option value="1">Reject</option>
</select>
</div>
<input type="hidden" class="id" value="2">
<input type="button" name="updaterow" class="save_button" value="Update">
</form>
</td>
</tr>
</table>