Получить динамический идентификатор формы PHP с помощью Ajax в другом файле

Question

1. Имеется 3 рассматриваемых файла.

2. Один - это файл dashboard.php, который содержит тег сценария, указывающий на файл course_mg.js.

3. Файл course_mg.js использует файл ajax для получения файла course_mg.php для отображения списка студентов.

Итак, вот два вышеупомянутых файла [невключая dashboard.php, поскольку он содержит только тег script, но имейте в виду, что это главная страница, где используется ajax].

course_mg.php

<?php

    require('../../inc/connect.php');
    if(isset($_POST['delete_course'])){
        $id = $_POST['delete_course'];
        $sql_del = "DELETE FROM courses WHERE courses.id = $id";
        $result = $mysqli->query($sql_del) or die($mysqli->error);
    if($result){
        header('location: ../dashboard.php');
    } else{
        echo "Error in deleting user";
    }
}

?>

<div class="dash_head">Manage Course</div>
<div class="card mx-5 my-5 px-5">

    <h3 class="h3">View Courses Info</h3>
    <table class="table table-bordered table-sm table-hover text-center">
        <thead class="thead-light">
            <tr>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">Created_At</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>

        <?php
        $offset = (1 - 1) * 3;
        $row_count = 3;
        $sql = "SELECT * FROM courses"; // order by id limit $row_count offset $offset"    
        $result = $mysqli->query($sql) or die($mysqli->error);  
        while($row = $result->fetch_assoc()){
            $_SESSION['id'] = $row['ID'];
            ?>
                <tr>
                    <th scope="col">
                        <?php echo $row['ID']; ?>
                    </th>
                    <td>
                        <?php echo $row['Name']; ?>
                    </td>
                    <td>
                        <?php echo $row['Created_At']; ?>
                    </td>
                    <td>
                        <form method="POST" action="php/course_mg.php">
                            <button class="btn btn-sm bg-danger text-white" type="submit" name="delete_course" value="<?php echo $_SESSION['id'];?>">Delete</button>
                        </form>  
                    </td>
                </tr>
                <?php
        }
    ?>
        </tbody>
    </table>
    <div>
        <h6><em>List of Available Courses</em></h6>
    </div>
    <div>
        <nav aria-label="Page navigation example">
            <ul class="pagination">
                <li class="page-item"><a class="page-link disabled" href="#">Previous</a></li>
                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link disabled" href="#">Next</a></li>
            </ul>
        </nav>
    </div>
</div>

course_mg.js

document.getElementById('course_mg').addEventListener('click', load_managecourse);

    function load_managecourse(e) {

        e.preventDefault();

        var xhr = new XMLHttpRequest();

        xhr.open('GET', 'php/course_mg.php', true);

        xhr.onload = function () {

            if(this.status == 200) {
                document.getElementById('showresults').innerHTML = this.responseText;
                document.getElementById('ID').addEventListener('submit', deleteCourse(this.value));

                function deleteCourse($id) {

                    e.preventDefault();
                    console.log($id);
                    var name = document.getElementById(ID).value;

                    console.log(name);

                    var params = "delete_course=" + name;

                    var xhr = new XMLHttpRequest();

                    xhr.open('POST', 'php/course_mg.php', true);

                    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

                    xhr.onload = function() {
                        if(this.status == 200){
                            document.getElementById('userAdded').style.padding = "15px 0px";
                            document.getElementById('userAdded').style.borderRadius = "200px";
                            document.getElementById('userAdded').innerHTML = `
                                Course Deleted
                            `;
                        }
                    }

                    xhr.send(params);
                }
            }
        }
        xhr.send();
    }

Теперь это прекрасно работает в PHP, но не работает в AJAX именно потому, что я не могу понять, как получить динамический идентификатор формы php в javascript.

Например, это то, что я хочуdo:

<form id="dynamic_id_based_on_user_id_extracted_from_database">
 <button type="submit" name="delete_course" value="<?php echo $_SESSION['id'];?>">Delete</button>
</form>

Мне нужно одно значение formID, а другое - значение, указанное в значении кнопки в course_mg.js Код для этой цели начинается с указанной ниже строки:до этого он загружает ту же самую страницу course_mg.php , чтобы получить страницу, затем, нажимая кнопку удаления, пытается удалить пользователя.

document.getElementById('ID').addEventListener('submit', deleteCourse(this.value));

Я хочу знать, как я могу получитьДинамический заполнитель идентификатора из вышеуказанной формы?