Jquery only fired when changing one select input but not the other select tags

Question

for a users table, I'm trying to dynamically create a feature which allows the admin person to change the user's role from the table by clicking the select tag and changing the the role from the list of the roles provided which would fire the JQuery at the bottom with an AJAX called. The problem is, it is only responding to just one select tag on the table which is the one at the top row. I have someone understanding of what is wrong but have no idea how to resolve it. I think I need to loop through the events and listen to which is firing but I do not know how to implement that. Any help is much appreciated.

<tbody>
            <?php while ($all_admins = mysqli_fetch_assoc($admins)) { ?>
                <tr>
                    <td><img src="<?php echo url_for('../images/staff/'.$all_admins['image'])?>" onerror="this.src='<?php echo url_for('../images/staff/profile.jpg') ?>'" style="border:1px solid #ddd;border-radius:2px; box-shadow: #4a5f63; height: 70px;width: 70px"></td>
                    <td><?php echo h($all_admins['first_name']) ?></td>
                    <td><?php echo h($all_admins['last_name']) ?></td>
                    <td><a class='btn btn-info' href="staff.php?source=show_staff&staff_id=<?php echo h($all_admins['id']) ?>"> <?php echo h($all_admins['email']) ?> </a></td>
                    <td>
                        <?php
                                $role = $all_admins['role'];
                                switch ($role){
                                    case 'DE':
                                        echo "Data Entry";
                                        break;
                                    case 'GU':
                                        echo "General User";
                                        break;
                                    default:
                                        echo "Administrator";
                                        break;
                                }
                        ?>
                        <span>
                            <select id="urole" name="role[]">
                                            <option value="Admin" <?php echo ($role == 'Admin')?'selected':'' ?> >Admin</option>
                                            <option value="DE" <?php echo ($role == 'DE')?'selected':'' ?> >Data Entry</option>
                                            <option value="GU" <?php echo ($role == 'GU')?'selected':'' ?> >General User</option>
                            </select>
                        </span>
                    </td>
                    <td><a class='btn btn-info' href="staff.php?source=edit_staff&staff_id=<?php echo h($all_admins['id']) ?>">Edit</a></td>
                    <form method="post">
                        <input type="hidden" name="post_id" value="<?php //echo $post_id ?>">

                        <?php
                        echo '<td><input class="btn btn-danger" type="submit" name="delete" value="Delete"></td>';

                        ?>

                    </form>

                </tr>

  $(document).ready(function ()
    {
        
        $("#urole").change(function (){
            var val = $("#urole option:selected").val();
            console.log(val);
            // $("#urole").on('click', function(){
            //     v
            // });

            //displayData(val);
        });

        $("#urole").ready(function (){
            var val = $("#urole option:selected").val();
            console.log(val);
            //displayData(val);
        });

    });
    function displayData(query){
        $.ajax({
            url:"enrolled_learners/enrol_learner_provider.php",
            method:"post",
            data:{query:query},
            success:function (data)
            {
                //console.log(data);
                $('#q-provider').html(data);
            }
        });
    }

</script>

Answer 1

Your issue is that you're using duplicate ids which is not valid. element ids must be unique. As such $("#urole") is internally designed to return only one element. Instead, you should use a common class on these elements and use $(".urole") to target all elements that have that class.

Change your form to

<select class="urole" name="role[]">

And your jQuery to:

  $("#urole").change(function (){
        var val = $(this).val();
        console.log(val);
        displayData(val);
   });