JSFiddle - React, Tailwind, and code Playground

HTML

<ul id='firstList'>
    <li>A</li>
    <li>B</li>
</ul>
<ul id='secondList'>
    <li>C</li>
    <li>D</li>
</ul>
<a href="#" class="switch_order">Switch</a>

JavaScript

$('body').on('click', '.switch_order', function(e){
  var listA = $('#firstList');
  var listItems = listA.children('li');
  var listB=$('#secondList');
    var listItemsB = listB.children('li');
  listA.append(listItems.get().reverse());
    listB.append(listItemsB.get().reverse());
  
    
});