Detect button click of a dynamic table contains dynamic buttons with jQuery - php

Question

I have the following table dynamically generated using php and MySQL. The number of rows and number of buttons generated are dynamic.
<?php
if($resultCheck != 0){
while($result = mysqli_fetch_array($tableQueryExecute)){
$normalShiftDuration = $result['shift1Duration'];
?>
<tr> <form method="post" id="vtagViewTwo">
<td name=""><select class="form-control" name="normalShiftOa" id="normalShiftOa"><option>1</option></select></td>
<td>
<input type="submit" class="btn btn-primary" name="editButton" id="editButton" value="Save">
</td>
</form></tr>
<?php
}
}
?>
I want to get value of the <td> which is normalShiftOa value with the button click using jQuery click event as below.
$("#editButton").click(function(){
alert("Clicked");
});
But since there are many button generating for each row with the same id, I am not able to do it. Does anyone know how to do it? I am able to do it using php $_POST['editButton'] method. But I want to do it using jQuery.
Edit 1
I changed the id editButton to class and tried the following. But it is not working
$(".editButton").click(function(){
alert($(this).$("#normalShiftOa").val());
});

Answer 1

Instead of using ids, use class editButton. Then, if you want to get the value of the select, use jQuery like shown below:
$(".editButton").click(function(){
let tdValue = $(this).closest("form").find("select").val();
});
Edit: Code snippet that works.
$(".editButton").click(function(event){
let tdValue = $(this).closest("form").find("select").val();
alert(tdValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr> <form method="post" id="vtagViewTwo">
<td name=""><select class="form-control" name="normalShiftOa" id="normalShiftOa"><option>1</option></select></td>
<td>
<input type="submit" class="editButton btn btn-primary" name="editButton" id="editButton" value="Save">
</td>
</form></tr>