I want to refresh the table body when saving the updated row. I haven't used the tbody tag in my code instead I used id="mainBody" but when I try to reload I always get the subjected error.

manageBtn is the ID of the Save button in the model which is used to edit individual raw data.

<table class="table table-hover table-striped table-bordered table-dark" id="mainTable">
          <thead>
            <tr>
              <td>Job #</td>
              <td>Material</td>
              <td>Quantity</td>
              <td>Order Number</td>
              <td>Project Number</td>
              <td>Label Data</td>
              <td>Starting Serial</td>
              <td>Ending Serial</td>
              <td class="row flex-nowrap hiddenTH"></td>
            </tr>
          </thead>

          <tbody id="mainBody">
          </tbody>

        </table>

    $("#manageBtn").click(function() {
        var table = $('#mainBody').DataTable();
        table.ajax.reload();
    });
});