Get Dynamic PHP Form ID using Ajax in another File

Question

1. There are 3 files in question.

2. One is a dashboard.php file which contains a script tag to point to course_mg.js file.

3. course_mg.js file uses ajax to GET course_mg.php file to display list of students.

So here are the two above mentioned file [not including dashboard.php as it has only script tag but keep in mind it is the main page where ajax is being used].

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

4. Now this is working perfectly in PHP but failing in AJAX precisely because I am not able to figure out how to get dynamic php form id in javascript.

For instance this is what I want to 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>

There is one value I want of formID and another the value mentioned in value of button in the course_mg.js The code for this purpose starts from below mentioned line: before that it's loading the same course_mg.php page to get the page, afterwards on clicking delete it is trying to delete the user.

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

I want to know how can I get 'ID' placeholder dynamically from the above form?