jsp - Uncaught TypeError: Cannot set properties of undefined (setting '_DT_CellIndex') and the data table also n

<table class="table datatable-basic table-bordered" id="mviewTable">
                <thead>
                    <tr class="bg-blue-800">
        
                        <th
                            style="text-align: center; background-color: #2873d5; color: white;">Type</th>
                        <th 
                            style="text-align: center; background-color: #2873d5; color: white;">Last 
                            Refresh Start Time</th> 
                        <th
                            style="text-align: center; background-color: #2873d5; color: white;">Last
                            Refresh End Time</th>
                        <th
                            style="text-align: center; background-color: #2873d5; color: white;">Time
                            Taken</th>
                        <th
                            style="text-align: center; background-color: #2873d5; color: white;">Status</th>
                    </tr>
                </thead>
                <tbody>
                    <c:forEach items="${mviewStatus}" var="status">
                        <tr>
                            <td style="text-align: center">${status.type}</td>
                            <td style="text-align: center">${status.lastRefreshDate}</td>
                            <td style="text-align: center">${status.lastRefreshEndTime}</td>
                            <td style="text-align: center" 
                                    data-bs-toggle="tooltip" 
                                    data-bs-placement="top" 
                                    title="Start: ${status.lastRefreshDate}&#13;End: ${status.lastRefreshEndTime}">
                                    ${status.timeTaken}
                                </td>
                            <td style="text-align: center"><c:choose>
                                    <c:when test="${fn:trim(status.lastRefreshType) eq 'COMPLETE'}">
                                        <span style="color: green; font-weight: bold;">${status.lastRefreshType}</span>
                                    </c:when>
                                    <c:otherwise>
                                        <span style="color: red; font-weight: bold;">${status.lastRefreshType}</span>
                                    </c:otherwise>
                                </c:choose></td>
                        </tr>
                    </c:forEach>
                </tbody>
            </table>

$(document).ready(function() {
        // Destroy existing DataTable if exists
        if ($.fn.DataTable.isDataTable('#mviewTable')) {
            $('#mviewTable').DataTable().destroy();
        }

        $('#mviewTable').DataTable({
            pageLength: 10,
            ordering: true,
            searching: true,
            info: true,
            lengthChange: true,
            autoWidth: false,
            responsive: true
        });
    });

Hello,

I'm trying to implement a DataTable on a dynamic table in a JSP page that is populated using a <c:forEach> loop. I want to make the table sortable and searchable using the DataTables jQuery plugin. However, when I try to initialize the DataTable, it doesn't seem to work, and I'm encountering errors.

Here's my problem: DataTable is not functioning: The table doesn't become interactive with sorting or searching capabilities after I initialize the DataTable. Error in console: There are errors related to DataTable initialization when I open the browser's developer console. I’m not sure what might be causing them.