JSFiddle - React, Tailwind, and code Playground

HTML

<table id="walls_settings_timers" class="vertical display dataTable dtr-inline no-footer DTTT_selectable" cellspacing="0" width="100%" role="grid" style="width: 100%;"> <thead>
            <tr role="row"><th class="sorting" tabindex="0" aria-controls="walls_settings_timers" rowspan="1" colspan="1" aria-label="Pump timer 1: activate to sort column ascending" style="width: 105px;">Pump timer 1</th><th class="sorting" tabindex="0" aria-controls="walls_settings_timers" rowspan="1" colspan="1" aria-label="Pump timer 2: activate to sort column ascending" style="width: 105px;">Pump timer 2</th><th class="sorting" tabindex="0" aria-controls="walls_settings_timers" rowspan="1" colspan="1" aria-label="Pump timer 3: activate to sort column ascending" style="width: 105px;">Pump timer 3</th><th class="sorting" tabindex="0" aria-controls="walls_settings_timers" rowspan="1" colspan="1" aria-label="Force pump run?: activate to sort column ascending" style="width: 137px;">Force pump run?</th><th class="sorting" tabindex="0" aria-controls="walls_settings_timers" rowspan="1" colspan="1" aria-label="Lights timer 1: activate to sort column ascending" style="width: 110px;">Lights timer 1</th><th class="sorting" tabindex="0" aria-controls="walls_settings_timers" rowspan="1" colspan="1" aria-label="Lights timer 2: activate to sort column ascending" style="width: 110px;">Lights timer 2</th><th class="sorting" tabindex="0" aria-controls="walls_settings_timers" rowspan="1" colspan="1" aria-label="Fan timer 1: activate to sort column ascending" style="width: 111px;">Fan timer 1</th><th class="sorting" tabindex="0" aria-controls="walls_settings_timers" rowspan="1" colspan="1" aria-label="Fan timer 2: activate to sort column ascending" style="width: 89px;">Fan timer 2</th><th class="sorting" tabindex="0" aria-controls="walls_settings_timers" rowspan="1" colspan="1" aria-label="Fan timer 3: activate to sort column ascending" style="width: 89px;">Fan timer 3</th><th class="sorting" tabindex="0"...

JavaScript

function swap( cells, x, y ){
   if( x != y ){     
   var $cell1 = cells[y][x];
   var $cell2 = cells[x][y];
   $cell1.replaceWith( $cell2.clone() );
   $cell2.replaceWith( $cell1.clone() );
    }
}

var cells = [];
$('thead').find('tr').each(function(){
    var row = [];
    $(this).find('th').each(function(){
       row.push( $(this) );    
    });
    cells.push( row );
});

$('tbody').find('tr').each(function(){
    var row = [];
    $(this).find('td').each(function(){
       row.push( $(this) );    
    });
    cells.push( row );
});

for( var y = 0; y <= cells.length/2; y++ ){
    for( var x = 0; x < cells[y].length; x++ ){
        swap( cells, x, y );
    }   
}