On sorting the rows by columns the function gets overridden with the default function

before sorting
function works fine
after sorting
function gets overrriden
here is my code;

<script type="text/javascript">
$(document).ready(function() {
    $('#tablename').DataTable.ext.pager.numbers_length = 5;// For setting pagination with elipses(...)
    var table= $('#tablename').DataTable( {
     "initComplete": function( settings, json ) {
      updateServiceButtons();
    },
     "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
     "pagingType": "full_numbers",
     "processing": true,
     "serverSide": true,
     "ajax":"../tablename_ajax_d/serverSide.php",
     "columns": [
                        { "data": "mm_sno" },
                        { "data": "system_name" },
                        { "data": "ip_address" },
                        { "data": "service_name" },
                        { "data": "service_status" },
                        { "data": "date" },
                        { "data": null },
                        { "data": null }
                    ],      
    "columnDefs": [
                    {
                        "targets": -2,
                        "data": null,
                        "defaultContent": `<button id ="restart-service" class="btn btn-success" data-toggle='modal' data-target='#service-start-stop-modal'>Restart</button>`
                        
                      },
                    {
                        "targets": -1,
                        "data": null,
                        "defaultContent": `<button id ="stop-service" class="btn btn-danger" data-toggle='modal' data-target='#service-start-stop-modal'>Stop</button>`
                      }
                ],
    rowCallback: function(row, data, index){
        if(data.service_status=='running'){
        $(row).find('td:eq(2)').css('color', 'GREEN');
        }
        else if(data.service_status== 'failed'){
        $(row).find('td:eq(2)').css('color', 'red');
        }
    }
    } );

$('#tablename tbody').on( 'click', 'button', function () { 
  var data = table.row( $(this).parents('tr') ).data();
  var type = $(this).attr('id').includes('restart') ? 'restart' : 'stop';
  host_url = `url1`
  $.ajax({
    type: "GET",
    url: `url2`,
    success: function(result){
      try{
        var res = $.parseJSON(result);
        if(res){
          $(".modal-body").html(`Service ${data['service_name']} is successfully ${type}ed`);
        }else{
          $(".modal-body").html(`${res}`);
        }
      }
      catch(error){
        $(".modal-body").html("something went wrong");
      }
    }
  });
});
} );
function updateServiceButtons(){
    var rows = $("tbody").find("tr");
    const RUNNING_STATE = 'running';
    for(var i=0; i<rows.length; i++){
      var elem = $($("tbody").find("tr")[i]);
      if(elem.find(".service-status").text() == RUNNING_STATE){
        elem.find("#restart-service").attr("disabled","disabled");
        elem.find("#stop-service").removeAttr("disabled");
      }else{
        elem.find("#stop-service").attr("disabled","disabled");
        elem.find("#restart-service").removeAttr("disabled");
      }
    }
  }
</script>

Thanks
Koka

EDIT:Update code formatting use triple back ticks.