Estoy trabajando con ajax y jquery, en realidad estoy usando dos funciones diferentes

1. Agregue el nombre de clase "activo" a las columnas (en las que se hizo clic)
2. Ejecute Ajax cada 10 segundos. Entonces, mi primera función funciona correctamente y agrego la clase a las columnas (agregue la clase en la columna / encabezado de tabla "nombre" o "símbolo"), pero cada vez que uso la segunda función, obtengo el "texto de clase" antiguo pero en inspección elemento que muestra "activo" a otro, ¿cómo puedo hacer esto?

Aquí está mi código html

 <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>

Aquí está mi primera función que agrega clase a las columnas (dinámicas)

 $(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; } }) }); });

Aquí está mi segunda función, ¿dónde me equivoco?

 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 }