Please, i need help with my GRID ROTATOR

Context Laying out nine(9) buttons to form a 3 x 3 grid inside a div and modifying their labels after each click event on one of the buttons.
The labels on the outer button must rotate in a clockwise direction each
time we click the middle button

Design the UI to show a 3 x 3 grid form containing buttons labelled 1 - 9.
Write an algorithm to rotate the outer buttons in a clockwise direction every time
the middle button (button 5) is clicked and in an anti-clockwise direction is any
other button is clicked.
my solution can only move clockwise when the button 5 is click but i can’t initiate the call for the anticlockwise rotation. kindly help out, find my code below;

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <title>Button Grid</title>

    #btns {
            width: 75%;
        .btn {
            width: 30%;
            height: 48px;
            font-size: 24px;
    Button Grid
    <div id="btns">
        <button id="btn1" class="btn">1</button>
        <button id="btn2" class="btn">2</button>
        <button id="btn3" class="btn">3</button>
        <button id="btn4" class="btn">4</button>
        <button id="btn5" class="btn">5</button>
        <button id="btn6" class="btn">6</button>
        <button id="btn7" class="btn">7</button>
        <button id="btn8" class="btn">8</button>
        <button id="btn9" class="btn">9</button>
 let nums=[1,2,3,6,9,8,7,4];
const ids=[1,2,3,6,9,8,7,4];

let btn5=document.getElementById("btn5");
    for (i=0; i<=7; i++) {



@uchay your code targets only Button 5. Have you already tried targeting other buttons ? If so, edit your post and paste that code there please.

const rotate = (state) => {
    const val1 = state[0].pop()
    const val2 = state[2].shift()
    const val3 = state[1].pop()
    const val4 = state[1].shift()

const state = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]

I wrote this algorithm. Perhaps that solves your problem about rotating.