Multiple datatables project

Hello Freelancers, Our client would like to display 2 tables. 1 table is a normal table and the other table is a datatables using [login to view URL] The issue the client is having is as followed: When the page loads it will show table 1, but when you click the button 2 it will not load the datatables correctly due. When the client removes the display:none from the table2 class it will load correctly but it will also load when the page is loaded which is not what the client wants. They want to display 1 table at a time. Below is the code The client has 2 buttons. button 1 <input type = "button" data-toggle="tooltip" data-placement="top" title="" data-original-title="table 1" class="btn btn-xs btn-dark btn-uppercase text-shadow" id = 'table1' name = 'table1' value = 'Table 1' onclick = '[login to view URL]("table_1").[login to view URL] = ""; [login to view URL]("table_2").style.display="none";'> button 2 <input type = "button" data-toggle="tooltip" data-placement="top" title="" data-original-title="table 2" class="btn btn-xs btn-dark btn-uppercase text-shadow" id = 'table2' name = 'table2' value = 'Table 2' onclick = '[login to view URL]("table_1").[login to view URL] = "none"; [login to view URL]("table_2").style.display="";'> <div id ='table_1' class="table-responsive"> table 1 </div> <div id ='table_2' class="table-responsive" style="display:none"> <table id="example2" class="table mg-b-0 "> table 2 <div> </div> <script> $('#example2').DataTable({ responsive: true, language: { searchPlaceholder: 'Search...', sSearch: '', lengthMenu: '_MENU_ items/page', } }); </script>