Ordering issue in building up a table

Hi all,
I'm building up a table and with the initial loading of the page my data is loaded using a load_data(); function. (working fine)

load_data();
  function load_data(var_devicetype, var_location, var_available){
    var dataTable = $('#product_data').DataTable({
      "processing":true,
      "serverSide":true,
      "order":[],
      "ajax":{
        url:"load_data.php",
        type:"POST",
        data:{
          devicetype_id:var_devicetype,
          location_id:var_location,
          available:var_available,
          urlid:url_id
        }
      },
      "columnDefs":[
        {
          "targets":[3,4],
          "orderable":false
        },
        {
          //show device id or not
          "targets": [7],
          "visible": false,
          "searchable": false
        },
      ],
    });
  }

With an "$('#product_data tbody').on('click', 'tr', function () {" function I'm adding an extra row below where I clicked on a tr and load some external page to edit data using an ajax GET type.

    var table = $('#product_data').DataTable();
    $('#product_data tbody').on('click', 'tr', function () {
      var data = table.row( this ).data();
      var tr = $(this).closest('tr');
      var row = table.row(tr);
      if (row.child.isShown()) {
        row.child.hide();
        tr.removeClass('shown');
        $(this).css('background','');
      }
      else {
        //Show waiting animation when original row is clicked
        var check_tr = $(this).attr('role');
        if (check_tr == "row"){
          $('#loading_animation').show();
        }
        $.ajax({
          type: 'GET',
          url: "extradata.php?id="+data[7],
          success: function (response) {
            row.child( response ).show();
            $('#loading_animation').hide();
          },
          error: function (xhr, ajaxOptions, thrownError) {
            row.child( 'Error loading content: ' + thrownError ).show();
          }
        });
        tr.addClass('shown');
        $(this).css('background','#74B3DD');
      }
    } ); 

All this works fine, when I change my data using this extradata.php using a form I change the data and reload the page adding "?id=1" in the url where 1 is the id.
If the id is there the load_data() will create content with only 1 row, this works fine.
Also I have following function:

  if (url_id != "" && Number.isInteger(url_id)){
window.alert("url_id");
    //Show waiting animation when content is loaded
    $('#loading_animation').show();
    $.ajax({
      type: 'GET',
      url: "extradata.php?id="+url_id,
      success: function (response) {
        var cols = $('#product_data tr:last td').length;
        var content = '<tr><td colspan="'+cols+'">' + response + '</td></tr>';
        $('#product_data tr:last').after(content);
        $('#loading_animation').hide();
      }
    });
  }

If I do this then result looks good and I see my 1 row of the ID and the extra data using the last function.

If I now remove the window.alert("url_id"); then my table is messed up.
The result I get is that the extradatapage is added in the thead because the the data from the load_data is not yet printed on the screen, it only gets printed after this extradata is printed.

So my question is how can I force this extradata to be printed on screen before the extradata without having the alert?