Cannot read property 'nodeName' of null When I am adding row in tfoot

here is my html

<!--Table-->
<table id="popuTable" class="table table-striped table-bordered" style="width:100%">

    <!--Table head-->
    <thead>
        <tr>
            <th>No</th>
            <th>PU No.</th>
            <th>PU Description</th>
            <th>Unit</th>
            <th>Rate</th>
            <th>PU Rate (RM)</th>
            <th>Inst. QTY (UNIT)</th>
            <th>Inst. Value (RM)</th>
            <th>Value (%)</th>
            <th>Claimable (RM)</th>
            <th>Scope</th>
            <th>Action</th>
        </tr>
    </thead>
    <!--Table head-->

    <!--Table body-->
    <tbody>

    </tbody>
    <!--Table body-->

    <!--Table Footer-->
    <tfoot>
        <tr></tr>
    </tfoot>
    <!--/Table Footer-->

</table>
<!--Table-->

Here is my jquery code

//project popu table
var popuTable = $('#popuTable').DataTable( {
    "responsive": true,
    "processing": true,
    "serverSide": true,
    "pageLength": 50,
    "ajax": {
        "url":  "<?php echo base_url('admin/list-pupo');?>",
        "type": "POST"
    },
    "ordering": false
});

I am using server side. It is working fine, but when I add <tr></tr> in <tfoot>, I am getting error. But if <tfoot> is blank its woring fine. Here is the error.

What is the exact problem? Thanks in advanced.