I am new to jquery and want to implement jquery datatables for my project.

 $(document).ready(function () {
        function destroyDataTable(table) {
            if ($.fn.DataTable.isDataTable(table)) {
                $(table).DataTable().destroy();
            }
        }

        $('#myTable').show();
        $('#myTable caption').show();

        $('#myTable2').hide();
        $('#myTable2 caption').hide();

        $('#myTable').DataTable();


        $('#toggleTable1').click(function () {
            $('#myTable').toggle();
            $('#myTable caption').toggle();

            if ($('#myTable').is(':visible')) {
                if (!$.fn.DataTable.isDataTable('#myTable')) {
                    $('#myTable').DataTable({});
                }
                destroyDataTable('#myTable2');
                $('#myTable2').hide();
                $('#myTable2 caption').hide();
            } else {
                destroyDataTable('#myTable');
            }
        });

        $('#toggleTable2').click(function () {
            $('#myTable2').toggle();
            $('#myTable2 caption').toggle();

            if ($('#myTable2').is(':visible')) {
                if (!$.fn.DataTable.isDataTable('#myTable2')) {
                    $('#myTable2').DataTable({});
                }
                destroyDataTable('#myTable');
                $('#myTable').hide();
                $('#myTable caption').hide();
            } else {
                destroyDataTable('#myTable2');
            }
        });
        $('#myTable, #myTable2').find('th, td').addClass('text-center');
    });

I asked Chatgpt for this code and idk this does not seem concise and is looking unprofessional. Is their a better way?I can’t seem to find smth about this in jquery data tables documentation.