I want to change the first order of the tab menu every time the tab menu is clicked

I want to change the first order of the tab menu every time the tab menu is clicked.

I am currently studying using an open source called jui.

Below is the tab menu source code.

HTML

<ul id="header-tab-menu" class="tab">
  <li><a href="#menu1">menu1</a></li>
  <li><a href="#menu2">menu2</a></li>
  <li><a href="#menu3">menu3</a></li>
</ul>

<div id="tab_left_contents">
  <div id="menu1"></div>
  <div id="menu2"></div>
  <div id="menu3"></div>
</div>

<div id="tab_right_contents">
  <div id="menu1"></div>
  <div id="menu2"></div>
  <div id="menu3"></div>
</div>

JS

jui.ready([ "ui.tab" ], function(tab) {
  header_tab_menu = tab("#header-tab-menu", {
    target: "#tab_left_contents, #tab_right_contents",
    index: 0
  });
});

In the JS source code, index: 0 indicates the first order of the tab menu.