Select and Sort on different header rows

I have a DataTable that I want to have some columns filtered, some with selects, and most sortable. I have all three things going and work with my server. The problem I am having is that I can't get the sort to be on one row and the filters and selects to be on the other. I can get filters and sort to be different but selects go wherever I put the sort option.

Basically, when a dropdown is clicked it sorts for that column. Then when something is selected it sorts the other way.

I have tried setting the html to already have the sortable class, setting a class on the select creation, I even tried setting orderCellsTop to True and bSortCellsTop to false hoping that one would still use the old way.

Here is what I have currently:

$(document).ready(function(){   
    $('#recordListing thead tr')
        .clone(true)
        .addClass('sort')
        .removeClass('filters')
        .appendTo('#recordListing thead');
    var dataRecords = $('#recordListing').DataTable({
        "processing":true,
        "serverSide":true,
        'processing': true,
        'serverSide': true,
        'serverMethod': 'post',
        stateSave: true,
         lengthMenu: [
             [10, 25, 50, -1],
             [10, 25, 50, 'All']
         ],
        "order":[],
        "ajax":{
            url:"ajax_action.php",
            type:"POST",
            data:{action:'listRecords'},
            dataType:"json"
        },
        "columnDefs":[
            { "width": "3%", "targets": 0 },
            {
                "targets":[0, 7],
                "orderable":false,
            },
        ],
        "searching": true,
        orderCellsTop: false,
        fixedHeader: true,
        bSortCellsTop:false,
        initComplete: function () {
            var api = this.api();
            var cols = [2,5,6];
            
            // For each column
            api
                .columns([1,3])
                .eq(0)
                .each(function (colIdx) {
                    // Set the header cell to contain the input element
                    var cell = $('.filters th').eq(
                        $(api.column(colIdx).header()).index()
                    );
                    var title = $(cell).text();
                    //if (jQuery.inArray($(api.column(colIdx).header()).index(), cols) !== -1) {
                    $(cell).html('<input type="text" style="width:100%;" placeholder="' + title + '" />');
                    //}
                    // On every keypress in this input
                    $(
                        'input',
                        $('.filters th').eq($(api.column(colIdx).header()).index())
                    )
                        .off('keyup change')
                        .on('change', function (e) {
                            // Get the search value
                            $(this).attr('title', $(this).val());
                            var regexr = '{search}'; //$(this).parents('th').find('select').val();
 
                            var cursorPosition = this.selectionStart;
                            // Search the column for that value
                            api
                                .column(colIdx)
                                .search(
                                    this.value != ''
                                        ? regexr.replace('{search}', this.value)
                                        : '',
                                    this.value != '',
                                    this.value == ''
                                )
                                .draw();
                        })
                        .on('keyup', function (e) {
                            e.stopPropagation();
 
                            $(this).trigger('change');
                            $(this)
                                .focus()[0]
                                .setSelectionRange(cursorPosition, cursorPosition);
                        });
                });
                this.api()
            .columns(cols)
            .every(function () {
                let column = this;
 
                // Create select element
                let select = document.createElement('select');
                select.add(new Option(''));
                column.header('.filters .select th').replaceChildren(select);
 
                // Apply listener for user change in value
                select.addEventListener('change', function () {
                    var val = DataTable.util.escapeRegex(select.value);
 
                    column
                        .search(val ?  val : '', true, false)
                        .draw();
                });

                if (column.index()==2){
                    select.add(new Option('Accessible'));
                    select.add(new Option('Unaccessible'));
                }
                if (column.index()==5){
                    select.add(new Option('AP'));
                    select.add(new Option('Server'));
                    select.add(new Option('Switch'));
                    select.add(new Option('URL'));
                }
                if (column.index()==6){
                    select.add(new Option('Jefferson'));
                    select.add(new Option('Mequon'));
                    select.add(new Option('Pittsburg'));
                }
                
            });
        }, 
    }); 
    
    $('#clearFilter').click(function(){
        var table = $('#recordListing').DataTable();
        table.search('');
        table.columns().search('').draw();
    }); 

    $('#addRecord').click(function(){
        clearInterval(intervalId);
        $('#recordModal').modal('show');
        $('#recordForm')[0].reset();
        $('.modal-title').html("<i class='fa fa-plus'></i> Add Record");
        $('#action').val('addRecord');
        $('#save').val('Add');
    });     
    $("#recordListing").on('click', '.update', function(){
        clearInterval(intervalId);
        var id = $(this).attr("id");
        var action = 'getRecord';
        $.ajax({
            url:'ajax_action.php',
            method:"POST",
            data:{id:id, action:action},
            dataType:"json",
            success:function(data){
                $('#recordModal').modal('show');
                $('#id').val(data.id);
                $('#name').val(data.name);
                $('#ip').val(data.ip);  
                $('#type').val(data.type);  
                $('#location').val(data.location);  
                $('.modal-title').html("<i class='fa fa-plus'></i> Edit Device");
                $('#action').val('updateRecord');
                $('#save').val('Save');
            }
        })
    });
    $("#recordModal").on('submit','#recordForm', function(event){
        event.preventDefault();
        $('#save').attr('disabled','disabled');
        var formData = $(this).serialize();
        $.ajax({
            url:"ajax_action.php",
            method:"POST",
            data:formData,
            success:function(data){             
                $('#recordForm')[0].reset();
                $('#recordModal').modal('hide');                
                $('#save').attr('disabled', false);
                dataRecords.ajax.reload();
                intervalId = setInterval(myFunction, 300000);
            }
        })
    });     
    $("#recordListing").on('click', '.delete', function(){
        var id = $(this).attr("id");        
        var action = "deleteRecord";
        if(confirm("Are you sure you want to delete this record?")) {
            $.ajax({
                url:"ajax_action.php",
                method:"POST",
                data:{id:id, action:action},
                success:function(data) {                    
                    dataRecords.ajax.reload();
                    intervalId = setInterval(myFunction, 300000);
                }
            })
        } else {
            return false;
        }
    }); 
    function myFunction() {
        dataRecords.ajax.reload();
     }
     let intervalId = setInterval(myFunction, 300000);
});