How do I integrate an existing delete function that is located in my routes.php file to a delete button in a modal in my hr.employees.profile.php?

Question

Delete modal

<div id="deleteModal" class="hidden fixed flex top-0 left-0 w-full h-full items-center justify-center bg-black bg-opacity-50">
    <div class="bg-white p-5 rounded-lg text-center">
        <h2 class="mb-4">Are you sure you want to delete?</h2>
        <button id="confirmDelete" class="mr-2 px-4 py-2 bg-yellow-400 hover:bg-yellow-500 text-white rounded">Yes</button>
        <button id="cancelDelete" class="px-4 py-2 bg-gray-300 text-black rounded">No</button>
    </div>
</div>
<script>
    document.getElementById('deleteButton').addEventListener('click', function() {
        document.getElementById('deleteModal').classList.remove('hidden');
    });

    document.getElementById('cancelDelete').addEventListener('click', function() {
        document.getElementById('deleteModal').classList.add('hidden');
    });

    document.getElementById('confirmDelete').addEventListener('click', function() {
        // Handle the deletion here
        console.log('Deleting...');
    });
</script>

DELETE employees

Router::post('/hr/employees/delete', function () {
    $db = Database::getInstance();
    $conn = $db->connect();

    $idToDelete = $_POST['id'];

    $query = "DELETE FROM employees, employment_info, account_info, salary_info, tax_info, benefit_info WHERE id = :id";
    $stmt = $conn->prepare($query);
    $stmt->execute([':id' => $idToDelete]);

    // Execute the statement
    $stmt->execute();

    $rootFolder = dirname($_SERVER['PHP_SELF']); header("Location: $rootFolder/hr/applicants");
});