JavaScript onclick Edit form Popup Not Working Issue

<button type="button" class="btn btn-success editbtn"> EDIT </button>

<div class="modal fade" id="editmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"

        aria-hidden="true">

        <div class="modal-dialog" role="document">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title" id="exampleModalLabel"> Edit Student Data </h5>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                        <span aria-hidden="true">&times;</span>

                    </button>

                </div>

                <form action="updatecode.php" method="POST">

                    <div class="modal-body">

                        <input type="hidden" name="update_id" id="update_id">

                        <div class="form-group">

                            <label> First Name </label>

                            <input type="text" name="fname" id="fname" class="form-control"

                                placeholder="Enter First Name">

                        </div>

                        <div class="form-group">

                            <label> Last Name </label>

                            <input type="text" name="lname" id="lname" class="form-control"

                                placeholder="Enter Last Name">

                        </div>

                        <div class="form-group">

                            <label> Course </label>

                            <input type="text" name="course" id="course" class="form-control"

                                placeholder="Enter Course">

                        </div>

                        <div class="form-group">

                            <label> Phone Number </label>

                            <input type="text" name="contact" id="contact" class="form-control"

                                placeholder="Enter Phone Number">

                        </div>

                    </div>

                    <div class="modal-footer">

                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                        <button type="submit" name="updatedata" class="btn btn-primary">Update Data</button>

                    </div>

                </form>

            </div>

        </div>

    </div>

<script>

        $(document).ready(function () {

            $('.editbtn').on('click', function () {

                $('#editmodal').modal('show');

                $tr = $(this).closest('tr');

                var data = $tr.children("td").map(function () {

                    return $(this).text();

                }).get();

                console.log(data);

                $('#update_id').val(data[0]);

                $('#fname').val(data[1]);

                $('#lname').val(data[2]);

                $('#course').val(data[3]);

                $('#contact').val(data[4]);

            });

        });

    </scrip
t>

The first code block is working. But when the same code is applied to a different editing area, the popup does not open.

<button type="button" class="btn btn-success editbtntwo"> EDIT </button>

<div class="modal fade" id="editmodaltwo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"

        aria-hidden="true">

        <div class="modal-dialog" role="document">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title" id="exampleModalLabel"> Edit Student Data </h5>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                        <span aria-hidden="true">&times;</span>

                    </button>

                </div>

                <form action="updatecodetwo.php" method="POST">

                    <div class="modal-body">

                        <input type="hidden" name="updatetwo_id" id="update_id">

                        <div class="form-group">

                            <label> First Name </label>

                            <input type="text" name="fnametwo" id="fnametwo" class="form-control"

                                placeholder="Enter First Name">

                        </div>

                        <div class="form-group">

                            <label> Last Name </label>

                            <input type="text" name="lnametwo" id="lnametwo" class="form-control"

                                placeholder="Enter Last Name">

                        </div>

                        <div class="form-group">

                            <label> Course </label>

                            <input type="text" name="course" id="course" class="form-control"

                                placeholder="Enter Course">

                        </div>

                        <div class="form-group">

                            <label> Phone Number </label>

                            <input type="text" name="contacttwo" id="contacttwo" class="form-control"

                                placeholder="Enter Phone Number">

                        </div>

                    </div>

                    <div class="modal-footer">

                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                        <button type="submit" name="updatedatatwo" class="btn btn-primary">Update Data</button>

                    </div>

                </form>

            </div>

        </div>

    </div>

<script>

        $(document).ready(function () {

            $('.editbtntwo').on('click', function () {

                $('#editmodaltwo').modal('show');

                $tr = $(this).closest('tr');

                var data = $tr.children("td").map(function () {

                    return $(this).text();

                }).get();

                console.log(data);

                $('#updatetwo_id').val(data[0]);

                $('#fnametwo').val(data[1]);

                $('#lnametwo').val(data[2]);

                $('#coursetwo').val(data[3]);

                $('#contacttwo').val(data[4]);

            });

        });

    </scrip
t>

The code block above works. The code block below does not work. Everything is the same in both. The popup of the second code block doesn't work at all. How should I do? I don't understand much of JavaScript. What do I need to add or remove from the second code block. I was getting similar errors in different applications I made, but I couldn't find a solution. Why does the first work, why does the second not?

source https://stackoverflow.com/questions/76644390/javascript-onclick-edit-form-popup-not-working-issue