title: Refresh DataTable without reloading page
body: <p>I am trying to reload data tables that have been inserted into tabs.</p>
  <p><strong>Please refer to question</strong>: <a href="https://stackoverflow.com/questions/63939440/ajax-update-datatable-after-on-success?noredirect=1#comment113065267_63939440">AJAX Update DataTable after On Success</a></p>
  <p>A PHP class userX.php has 3 data tables with client-side implementations. I am able to change a row of the first table using a button, once it is done the record will go to tab 2 -&gt; and the content of it table two. I am changing the status now using AJAX as this:</p>
  <pre><code>  $(&quot;.changeStatus&quot;).click(function(event){
        if(confirm(&quot;Are you sure changing status?&quot;)){
          event.preventDefault();
          var status =  &quot;In Production&quot;;
          var id = $(this).attr('data-id');
          $.ajax({
            url     : 'dbo.php',
            method  : 'POST',
            data    : {status : status , id : id},
            success : function(data){
              $('tr#'+id+'').css('background-color', '#ccc');
              $('tr#'+id+'').fadeOut('slow');
            }
          });
        }
        else{
          return false;
        }
      });
  </code></pre>
  <p>In the meantime it has to be updated in the tab 2 table as well. I have tried achieving this using div contents; neither of them seems working. What am I missing? I am open to suggestions.</p>