How do I create a from click inside another table.

Sorry the description might not make sense but couldn't think of anything else that did.
My problem is:
I have a dataTable. using server-side processing. The table fills fine.
The first column has a couple of possible links:
Clicking on the play works fine. Its the <li> which where the problem begins.

 data = "<button class='btn btn-info btn-sm'><li class='fas fa-play-circle 2x'  id='play'>Play </li><li class='fas fa-thumbtack'></li></button><li class='fas fa-plus' data-id="+row[10]+" ></li>";

I have a div on the page where I want to display the table

           <div id="AD">
                 <table id="ADtable" class="display"></table>
                 <button class="btn btn-sm btn-default" onclick='$("#AD").hide()' >Close</button>
                </div>

in my $(document).ready(function () { I have the following:

 $("#calltable tbody").on( 'click', 'li', function () {
   var data = mytable.row( $(this).parents('tr') ).data();
   var callpath = data[15];
   url = "includes/getattachedData.php";
   data = "callpath="+callpath;
   $.ajax({
      url : url,
      data : data,
      type :"POST",
      success : function(AD){
      console.log("Attached Data "+JSON.parse(AD));
      var returnedJson = JSON.parse(AD);
      $("#AD").show();
// AD is a div on the page which is hidden on load.
    var ADTable =   $('#ADtable').DataTable( { 
           "scrollY": "600",
           "scrollX": true,
                  data: JSON.parse(AD),
                  columns: [
                      { title: "Occurred At" },
                      { title: "Event" },
                      { title: "Key" },
                      { title: "Value" } 
                  ]
               } );
         }
   });
 });

I want this AD table to populate and display.
I've tried using a modal, which was my preferred method and will probably be implemented again once i solve this issue.
I get an error saying cant re-initialize the table. which makes perfect sense because its in the document.ready.
I tried using ADTable.destroy()
I've even tried

 $("#calltable tbody").on( 'click', 'li', function () {
   var data = mytable.row( $(this).parents('tr') ).data();
   var callpath = data[15];
   url = "includes/getattachedData.php";
   data = "callpath="+callpath;
   $.ajax({
      url : url,
      data : data,
      type :"POST",
      success : function(AD){
      var returnedJson = JSON.parse(AD);
      $("#AD").show();
// *** build a temp table ... then destroy it. Then create new table with new data.
      ADTable =   $('#ADtable').DataTable( { 
           "scrollY": "600",
           "scrollX": true
          } );
      ADTable.destroy();
      ADTable =   $('#ADtable').DataTable( { 
           "scrollY": "600",
           "scrollX": true,
                  data: JSON.parse(AD),
                  columns: [
                      { title: "Occurred At" },
                      { title: "Event" },
                      { title: "Key" },
                      { title: "Value" } 
                  ]
                
              } );
   

      }
   });
 });

thinking that if the table already exists it would be destroyed and then created.
I'm going round in circles and getting nowhere..
I think i'm missing something really fundamental but i'm getting a mental block at the moment.
as always... any help is greatly appreciated.