如何从具有相同类的按钮获取值使用JQuery

Question

I have a PHP script which Produces the n number of buttons as an output based on database records. Each value is associated with a respective button.

When I click any button, I always get the value of first button.

How can I get the value of button which is clicked only?

<button class='btn btn-danger question_delete' value=".$row['action_id']."</button>

My jQuery script:

$(document).ready(function(){
    $(".question_delete").click(function(){
        var action_value = $(this).val();
        if(action_value){
            $.ajax({
                type:'POST',
                url:'delete_question_group.php',
                data:{delete_action:action_value},
                success:function(data){
                     refresh_table();
                     refresh_paper();
                }
            }); 
        }else{
           // $('#select_qtype_list').html('<option value="">Select Question First</option>');
        }
    });
});

My PHP:

<?php
session_start();
$name =$_SESSION['name'];
$id = $_SESSION['id'];
include("database.php");
$run = mysqli_query($conn,"select * from users where id='$id' AND name='$name' "); 
$user = mysqli_fetch_array($run);
$subject_id = $user['subject_id'];
$user_name = $user['name'];
$run1 = mysqli_query($conn,"select * from subject where sub_id='$subject_id'");
$subject = mysqli_fetch_array($run1);
$subject_name = $subject['sub_name'];

    $query = $conn->query("select * from action where subject_id='$subject_id' AND user_id='$id'");

        //Count total number of rows
    $rowCounts = $query->num_rows;

    //Display states list
    if($rowCounts > 0){
        $i=1;
        while($row = $query->fetch_assoc()){ 

            //echo '<option value="'.$row['qtype_id'].'">'.$row['qtype_name'].'</option>';
            echo "<tr>";
            //$q_id = $query['question_id'];
            //$question_type_id = $query['question_type_id'];
            echo "<td>$i</td>";
            echo "<td>".$row['action_name']."</td>";
            echo "
            <td>
                <button class='btn btn-danger question_delete' value=".$row['action_id'].">
                    <i class='fa fa-trash' aria-hidden='true'>
                    </i>
                </button>
            </td>
            <td>
                <button id='question_update' class='btn btn-primary' data-toggle='modal' data-target='#myModal_update' value=".$row['action_id'].">
                    <i class='fa fa-pencil' aria-hidden='true' >
                    </i>
                </button>
            </td>  
            </tr>


            ";
            $i++;
        }
    }else{
        echo '<td colspan="4" style="text-align: center; color:red;"><strong>No Questions are Selected</string></option>';
    }

?>

Answer 1

-This Problem is Solved and Worked Perfectly. Description of solution is as follow:

-First onclick attribute is used. and a function is created which takes the value of button each time when button will click.

Following Code is worked:

<button class='btn btn-danger' onclick='myfunction(this.value)' id='question_delete' value=".$row['action_id']."><i class='fa fa-trash' aria-hidden='true'></i></button>

JQuery Code:

$(document).ready(function(){
    myfunction1 = function(e){
        if(e){
            $.ajax({
                type:'POST',
                url:'update_question_group.php',
                data:{update_action:e},
                success:function(html){
                    $('#update_action_list').html(html);
                    $('#update_action_list').selectpicker('refresh');
                }
            }); 
        }else{
           // $('#select_qtype_list').html('<option value="">Select Question First</option>');
        }
    }
});