How to show two html tables using different table id's?

var $container = $("#container");
 var $row = $("#container table tbody tr");

 // Loop through items in JSON data..
   var $button = $("<button>" + 'xyz' + "</button>");
   $container.prepend($button);
   var table = $("<table1>");
   table.append($("<tr><th>column1</th><th>column2</th></tr>"));
	 // Button click handler..
   $button.on("click", function(e) {
   e.preventDefault();
   for( var i=0; i<2; i++) {
     // Replace row HTML..
     //parent row
     var row=$('<tr ><td>' + 'data' + '</td>' +  + '<td>' + "" + '</td></tr>');
     table.append(row);
     for(var j =0; j<2; j++) {
     var row=$('<tr><td>' + "" + '</td></tr>');
     $('<td>data</td>')
          .on('click', function() { 
          //I want to display table2 when clicked on col2 data
          var table = $("<table2>");
          table.append($("<tr><th>col1</th><th>col2</th></tr   >"));
          var row=$('<tr><td>' + 'data' + '</td>' +  + '<td>' + "" + '</td></tr>');
          table.append(row);
          })
          .appendTo(row);
          table.append(row);
          $("#table2").html(table);
     }
 }    
     $("#table1").html(table);


     // Show table if it's not already visible..

   });

#table2 {
   margin-top: 20px;
   border-collapse: collapse;
   border: 1px solid silver;
   width: 500px;
 }


#table1 {
   margin-top: 20px;
   border-collapse: collapse;
   border: 1px solid silver;
   width: 500px;
 }

#table1 th {
   border: 1px solid black;
   text-align: left;
 }
#table1 td {
  border: 1px solid black;
  text-align: left;
  }
#table1 tr {
  background-color: #f2f2f2;
  }
  
 button {
   margin-left: 15px;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="container"><div id="table1"></div></div><div id="table2"></div>