Getting Text, Values from Select Element as Child of Table

Getting Text, Values from Select Element as Child of Table

Hello,
I have a table of two rows.
I'm needing to get the select element's text or values from this table.
I've been trying to use a thing that gets the indexed row of the button that fires the event. It is supposed to return the row where the button was fired. I use that as a var in jquery to hopefully get the value of the select element on that row.
I'm getting answers in the console, but they are the wrong answers. You will have to load this in VS Code to see what I mean.


Thanks


[SOURCE]
<!DOCTYPE HTML>


<head>
<script src="jquery-3.3.1.min.js"> </script>
<style>
table {
border: 1px black solid;
padding: 10px;
}

table td {
border: 1px black solid;
}
</style>
</head>

<body>
<form type="Submit">
<table id="table1">
<tr>
<th>Name</th>
<th>Option</th>
<th>Age</th>
</tr>
<tr>
<td>
Bob
</td>
<td>
<select class='autoAprv'>
<option value='5'>Select</option>
<option value='0'>T</option>
<option value='1'>F</option>
</select>
</td>
<td>
15
</td>
<td>
<button class="btn" onclick="doIt(this)">push</button>
</td>
</tr>
<tr>
<td>
Peter
</td>
<td>
<select class='autoAprv'>
<option value='5'>Select</option>
<option value='0'>T</option>
<option value='1'>F</option>
</select>
</td>
<td>
21
</td>
<td>
<button class="btn" onclick="doIt(this)">push</button>
</td>
</tr>
</table>



<label id="result"></label>
</form>
</body>
<script>
function doIt(element) {
var row = element.parentNode.parentNode.rowIndex;
var col = element.parentNode.cellIndex + 1;
console.log("button row: " + row + "| button col: " + col);
var x = $(".autoAprv").val()[row];
var y = $(".autoAprv option:selected").text()[row];
console.log("Val: "+ x + " | Text: " + y);

}
</script>

</HTML>
[SOURCE]

[CHROME CONSOLE]
button row: 2| button col: 4
Val: undefined | Text: l

button row: 1| button col: 4
Val: undefined | Text: e
[CHROME CONSOLE]