'on select tab change order of other tabs anti-clockwise

I am using tabs. On selection of tab, active tab position becomes middle tab. I want change order of all tabs when selecting middle tab from any order let's suppose the order was

1 2 3 4 5

the new order will be, on selection of 4th tab,

2 3 4 5 1

similar cycle will be applied on selection of any tab my current code is

const tablist = document.querySelector(".tablist"),
      tabs = Array.from( tablist.querySelectorAll(".tabs")).sort((a,b) => getComputedStyle(a).order - getComputedStyle(b).order); //get proper initial order

tablist.addEventListener("click", e =>
{
  if (!e.target.matches(".tabs"))
    return;

  for(let i = 0, order = 0, half = Math.round(tabs.length / 2); i < tabs.length; i++)
  {
    tabs[i].classList.toggle("tab-active", tabs[i] === e.target);
    tabs[i].style.order = (tabs[i] === e.target ? half : ++order == half ? ++order : order);
  }
});

tablist.querySelector(".tab-active")?.click(); //initialize order
.tablist { display: grid; }
.tablist li.tab-active { font-weight: bold; }
.tabs { cursor: pointer; user-select: none; }
<ul class="tablist">
<li class="tabs">Marketing</li>
<li class="tabs">Manufacturing</li>
<li class="tabs tab-active" >Municipalities</li>
<li class="tabs">Retail</li>
<li class="tabs">Healthcare</li>
</ul>

I am only suppose to use javascript no jquery or css for handling order.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source