如何使用意外结果将HTML导出表修复为Excel

I'm doing an online math quiz website with PHP, HTML and JavaScript for a school assignment. I'm able to export the whole table without any errors, but when it goes to the filter page it still can export to an Excel file, but the data is all messed up.

Expected result:

Actual result:

JavaScript:

<script type="text/javascript">
function exportTableToExcel(tableID, filename = '') {
    var downloadLink;
    var dataType = 'application/vnd.ms-excel';
    var tableSelect = document.getElementById(tableID);
    var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');

    // Specify file name
    filename = filename ? filename + '.xls' : 'excel_data.xls';

    // Create download link element
    downloadLink = document.createElement("a");

    document.body.appendChild(downloadLink);

    if (navigator.msSaveOrOpenBlob) {
        var blob = new Blob(['\ufeff', tableHTML], {
            type: dataType
        });
        navigator.msSaveOrOpenBlob(blob, filename);
    } else {
        // Create a link to the file
        downloadLink.href = 'data:' + dataType + ', ' + tableHTML;

        // Setting the file name
        downloadLink.download = filename;

        //triggering the function
        downloadLink.click();
    }
}
</script> 
<button name="create_excel" id="create_excel" class="btn btn-success" onclick="exportTableToExcel('rresult','studentresult')">Backup to Excel</button>

Table;

<table class='table table-striped' id="rresult">
 <div id="studentresult">
  <thead>
    <th class='text-primary'>#ID</th>
    <th class='text-primary'>Username</th>
    <th class='text-primary'>Name</th>
    <th class='text-primary'>Quiz Name</th>
    <th class='text-primary'>Correct Answer</th>
    <th class='text-primary'>Total Question</th>
    <th class='text-primary'>Student Mark (%)</th>
    <th class='text-primary'>Student Grade</th>
    <th class='text-primary'>Class</th>
    <th class='text-primary'>Date</th>
</thead>

Filter function:

<?php 
$query= "SELECT * from result GROUP BY class";
$result = mysqli_query($con,$query);
$test="";
$No= 0;
while($row = mysqli_fetch_assoc($result)){
  $test.= '<option value = "'.$row['class'].'">'.$row['class'].'</option>';
}
?>

if (isset($_POST['submit'])) {
        $test = $_POST['class'];
        if ($test != "") {
          $sql = "SELECT * FROM result WHERE class ='$test'";
          $data = mysqli_query($con,$sql);

          if (mysqli_num_rows($data) > 0) {
            while($row = mysqli_fetch_assoc($data)){
              $No = $No+1;
              $id =$row['id'];
              $username = $row['username'];
              $name = $row['name'];
              $quizname = $row['quiz_name'];
              $score = $row['score'];
              $total = $row['total'];
              $mark = $row['mark'];
              $grade = $row['grade'];
              $class = $row['class'];
              $date = $row['quiz_date'];

              ?>
              <tr>
                <td><?php echo $id; ?></td>
                <td><?php echo $username; ?></td>
                <td><?php echo $name; ?></td>
                <td><?php echo $quizname; ?></td>
                <td><?php echo $score; ?></td>
                <td><?php echo $total; ?></td>
                <td><?php echo $mark; ?></td>
                <td><?php echo $grade; ?></td>
                <td><?php echo $class; ?></td>
                <td><?php echo $date; ?></td>
              </tr>