Button click event of a dynamic table with dynamic buttons with jQuery

Anu :

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());
}); 

Mahatmasamatman :

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>

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=9504&siteId=1