Please, i need help with my GRID ROTATOR

1

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">
<head>
  <meta charset="UTF-8">
  <title>Button Grid</title>

  <style>
    #btns {
            width: 75%;
        }
        .btn {
            width: 30%;
            height: 48px;
            font-size: 24px;
        }
  </style>
</head>
<body>
  <h1>
    Button Grid
  </h1>
    <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>
    </div>
<script>
 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");
btn5.onclick=function(){
    nums.unshift(nums.pop());
    for (i=0; i<=7; i++) {
        document.getElementById("btn"+ids[i]).innerHTML=nums[i];
    }
}

</script>

</body>
</html>
2

@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.

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

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

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