title: show table results as it's loading done and get data from ajax call
body: <p>I have one main DIV inside that div I have 6 different table which shows the responses of API I'm calling APIs from ajax </p>
  
  <p>the thing is not every API gives results all the time so I need to display accordingly </p>
  
  <p>right now I'm using <code>.hide</code> and <code>.show</code> in order to get specific result table. </p>
  
  <p>the problem is if I get the data from 2nd API it will show the table at 2nd position and after that, if 5,6 gets responses they show-up now what is happening is if I get 3,4 APIs response they'll get space in between I want 3,4 result to be appended to the list.</p>
  
  <p>so for user(front-end) they show like all apis are responding one-by-one and display data one-by-one.</p>
  
  <pre><code>&lt;div class="insight text-center"&gt;   
  &lt;table id="ssl_table" class="table table-hover" style="color: black; position: relative; z-index: 1000; background: white;"&gt;
  &lt;/table&gt;
  &lt;table id="links_table" class="table table-hover" style="color: black; position: relative; z-index: 1000; background: white;"&gt;
  &lt;/table&gt;
  &lt;table id="tag_table" class="table table-hover" style="color: black; position: relative; z-index: 1000; background: white;"&gt;
  &lt;/table&gt;
  &lt;table id="drupal_table" class="table table-hover" style="color: black; position: relative; z-index: 1000; background: white;"&gt;
  &lt;/table&gt;
  &lt;table id="wp_table" class="table table-hover" style="color: black; position: relative; z-index: 1000; background: white;"&gt;
  &lt;/table&gt;
  &lt;table id="zx_table" class="table table-hover" style="color: black; position: relative; z-index: 1000; background: white;"&gt;
  &lt;/table&gt;
  &lt;table id="ada_table" class="table table-hover" style="color: black; position: relative; z-index: 1000; background: white;"&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong><em>i have 6 ajax like this</em></strong></p>
  
  <pre><code>$.ajax({
    "async": true,
    "crossDomain": true,
    "url": "api_url",
    "method": "POST",
    "headers": {
      "content-type": "application/x-www-form-urlencoded"
    },
    "data": {
      "url": "website_url
    }
  }
  ).done(function (response) {
  if (response.current) {
      $('#wp_table').show();
  } else { 
      $('#wp_table').hide();
      console.log('Error :',response)
      }  
  }).fail(function (jqXHR, response) {
      $('#wp_table').hide();
      console.log('Failed',response);
  
  });
  }
  </code></pre>