使用选择下拉列表使用Jquery更新表行

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.

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>

</div>