Jquery Datatables remember class and input after reload table

Question

I wonder if the folowing is possible. I use datatable and I use jquery to add a class to a clicked element within the table and i use a dropdown where input can be inserted and checkboxes selected. I found a code to refresh the information in the table every 30 seconds, but now I lose the added class and the input and selections from the dropdowns. Is it possible to choose what information is removed and redrawn to the table or a other way to remain these things after a refresh? I am a bit new to coding and I cant figur out how to do this so all help is welcome.

The folowing function is used to redraw the table and remain the selected rows.

function getData() {
    $.ajax({
      url: "DBScriptLoadAccounts.php",
      success: function (data) {
        
        // Parse JSON string.
        data = JSON.parse(data);
        
        // Get Datatable API
        var table = $('#AccountsTable').DataTable();
        
        // Get IDs of selected rows.
        var selected = table.rows({selected: true}).ids().toArray();
        
        // Add '#' to the IDs of each row
        selected.forEach(function(part, index) {
          this[index] = '#' + this[index];
        }, selected);
        
        //console.log(selected)

        // Clear table.
        table.clear();
        
        // Add new row data, draw and stay on same page.
        table.rows.add(data.data).draw(false);
        
        // Reselect rows absed on ID.
        table.rows( selected ).select();
      }
    });
}

The folowing rows are needed to remain their propertys. So they are not to be refreshed.

Column 4
{ 'data': null, title: '', wrap: true, "render": function (item) { return '<ol class="loginicon"><li aria-label="login" name = ' + item.id + ' class="fas fa-external-link-alt mobdetective LoginOnAccount" ></li></ol>' } },

Column 20
{ 'data': null, title: '', wrap: true, "render": function (item) { return '<div class="dropleft"><i class="fas fa-user-secret mobdetective" id="dropdownMenuButton' + item.id + '" data-bs-toggle="dropdown" aria-expanded="false"></i><span class="caret"></span><ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenuButton' + item.id + '"><li role="presentation" class="dropdown-header">Detectives</li><li role="presentation" class="divider"></li><li ><input type="text" name="Searchname" class="form-control Searchname" placeholder="Accountname"></li><li ><label><input type="checkbox" value="United States"> United States</label></li><li ><label><input type="checkbox" value="Netherlands"> Netherlands</label></li><li ><label><input type="checkbox" value="Italy"> Italy</label></li><li ><label><input type="checkbox" value="China"> China</label></li><li ><label><input type="checkbox" value="Great Britain"> Great Britain</label></li><li role="presentation" class="divider"></li><li role="presentation"><a role="menuitem" tabindex="-1" class="btn btn-outline-dark searchtarget" type="button">Search (80x)</a></li></ul></div>' } },

Functions to add classes Dropdown:

("#AccountsTable").on("change", "input[type='checkbox']",".checkbox-menu", function() {
   $(this).closest("li").toggleClass("active", this.checked);
});

Button

$("#AccountsTable").on("click", ".mobdetective", function () { // notice the on fu
  
    $(this).addClass("LastUsed");
      
    });

I hope someone here is able to help me, if any extra info is needed let me know.