I am working with ajax and jquery,Actually i am using two different functions

1. Append class name"active" to columns(which clicked)
2. Run Ajax after every 10 seconds So my first function working correctly and append class to columns(append class in "name" or "symbol" column/table header),But whenever i use 2nd function then getting old "class text" but in inspect element showing "active" to another,How can i do this ?

Here is my html code

<table border='1' width='100%' style='border-collapse: collapse;' id='postsList'>
     <thead>
      <tr>
        <th>S.no</th>
        <th class="column_sort" id="name" data-order="desc" href="#">Title
        </th>
        <th class="column_sort" id="symbol" data-order="desc" href="#">Symbol
        </th>
    </tr>
     </thead>
     <tbody></tbody>
</table>

Here is my First function which appending class to columns(dynamic)

$(document).ready(function() {
  var timesClicked = 0;
  $(document).on('click', '.column_sort', function(event) {
    event.preventDefault();

    var PageNumber = $("#pagination").find("strong").html();
    $(".column_sort").removeClass("active");
    $.ajax({
      url: '<?=base_url()?>/Main/fetch_details/',
      method: "POST",
      data: {
        column_name: column_name,
        PageNumber: PageNumber
      },
      success: function(data) {
        $("#postsList tr:not(:first)").remove();
        $("#postsList2").show();
        $("#postsList2").html(data);
        $('#' + column_name + '').addClass('active');
        return false;
      }
    })
  });
});

Here is my second function,Where i am wrong ?

setInterval(UpdateAllListing, 10000);

function UpdateAllListing() {
  if ($('th.column_sort').hasClass('active')) {
    var ColumnName = $('th.column_sort').text();
    alert(ColumnName)
  } else {
    alert(ColumnName);
  }
  //ajax code here
}