Uncaught TypeError: $(...).DataTable is not a function

[UsamaaAkram]

Basically I create a side bar dynamically and import this html using ajax method...

When a page loaded side-bar showed on the other hand table show in this error cause of side bar ...

When I loaded a side bar after the data-table it's response late and side bar show after loaded a table. (this process take a lot of time and If want to move on the second page sidebar can not show until data-table loaded)

But I want to show both thing same time.

here is snippet of js
`$(document).ready(function () {
alterSpan()
});

function alterSpan() {
$('#dataTableId').css({
display: 'block'
})
$('html,body').animate({
scrollTop: $("#collapseExample").offset().top
},
'slow');
dataTable()
}
function dataTable() {
var requestBody = JSON.stringify({
"app_id": '',
"namespace": '',
"auth_token": '***',

});
$.ajax({
    url: '***',
    method: POST,
    contentType: Content_Type,
    dataType: 'json',
    data: requestBody,
    success: function (data, textStatus, xhr) {
        var apiData = data
        
        if (apiData.length > 0) {
         
            $('#create_td').DataTable().clear().destroy();
            tableData = $('#create_td').DataTable({
                dom: 'Bfrtip',
                select: true,
                colReorder: true,
                buttons: [{
                    extend: 'collection',
                    orientation: 'landscape',
                    text: '<i class="material-icons" title="click to export data" style="color: #B71D1D;">settings</i>',
                    buttons: [
                        { extend: 'copy', titleAttr: 'copy', className: 'btn-exportable' },
                        {
                            extend: 'excel', titleAttr: 'excel', className: 'btn-exportable'
                        },
                        { extend: 'csv', titleAttr: 'csv', className: 'btn-exportable' },
                        { extend: 'pdf', titleAttr: 'pdf', className: 'btn-exportable' },
                        { extend: 'print', titleAttr: 'print', className: 'btn-exportable' },
                    ]
                }
                ],
                "lengthChange": false,
            });
            for (var i in apiData) {

                var myDate = new Date(apiData[i].eve_sec * 1000);
                var formated = myDate.toGMTString();
                var date = formated + ''
                var ab = timeFormat(date)
                var splited = date.split(" ")

                if (typeof apiData[i].description == "object") {
                    var lop = apiData[i].description
                    for (var j = 0; j < lop.length; j++) {
                        tableData.row.add([
                            '<span style="color:#000000; font-size: 14px;">' + lop[j] + '</span>',
                            '<span style="color:#000000; font-size: 14px;">' + apiData[i].type + '</span>',
                            '<span style="color:#000000; font-size: 14px;">' + ab + '</span>',
                        ]).draw()
                    }
                }
                if (typeof apiData[i].description != "object") {
                    console.log(apiData[i])
                    tableData.row.add([
                        '<span style="color:#000000; font-size: 14px;">' + apiData[i].description + '</span>',
                        '<span style="color:#000000; font-size: 14px;">' + apiData[i].type + '</span>',
                        '<span style="color:#000000; font-size: 14px;">' + ab + '</span>',
                    ]).draw()
                }
            }
        }

    },
    error: function (xhr, status, error) {}
});

}`

and html snippet
`

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

            <div class="card">
                <div class="body">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="table-responsive" id="tableDisplay">
                            <div class="scrollingdiv">
                                <table id="create_td"
                                    class="table table-bordered table-hover dataTable js-exportable">
                                    <thead>
                                        <tr>
                                            <th>Description</th>
                                            <th>Type</th>
                                            <th>Time</th>
                                        </tr>
                                    </thead>

                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>



<!-- Jquery Core Js -->
<script src="files/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap Core Js -->
<script src="files/plugins/bootstrap/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<!-- Select Plugin Js -->
<script src="files/plugins/bootstrap-select/js/bootstrap-select.js"></script>

<script src="files/plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
<script src="files/plugins/node-waves/waves.js"></script>
<script src="files/plugins/jquery-datatable/jquery.dataTables.js"></script>
<script src="files/plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js"></script>
<script src="files/plugins/jquery-datatable/extensions/export/dataTables.buttons.min.js"></script>
<script src="files/plugins/jquery-datatable/extensions/export/buttons.flash.min.js"></script>
<script src="files/plugins/jquery-datatable/extensions/export/jszip.min.js"></script>
<script src="files/plugins/jquery-datatable/extensions/export/pdfmake.min.js"></script>
<script src="files/plugins/jquery-datatable/extensions/export/vfs_fonts.js"></script>
<script src="files/plugins/jquery-datatable/extensions/export/buttons.html5.min.js"></script>
<script src="files/plugins/jquery-datatable/extensions/export/buttons.print.min.js"></script>

<script src="files/plugins/jquery-countto/jquery.countTo.js"></script>
<!-- Morris Plugin Js -->
<script src="files/plugins/raphael/raphael.min.js"></script>
<script src="files/plugins/morrisjs/morris.js"></script>

<script src="files/js/admin.js"></script>
<!-- side bar file -->
<script src="files/my-script/sidebar.js"></script>
<!-- main file js -->
<script src="files/my-script/alter.js"></script>



<script type="text/javascript" language="JavaScript">
    $.ajax({
        url: "SideBar.html",
        context: document.body,
        success: function (response) {
            $("#leftsidebar").html(response);
        }
    });
</script>

`