I want to implement code where the increment or decrement of a arrow happens when I have selected the arrow.

I want a replica of a design and implementation of code. these are the hebrew months in the screenshot that you can see.

In this example: the middle one is selected month,left one is the previous month of selected month and right hand side month is the next month of the selected month.

if user will click right hand side arrow (increment arrow) the "יוני" goes to middle and should be the selected month with bold text and the next month will come in the place of "יוני"

Again for left hand side arrow (decrement arrow) if user click the arrow the "אפריל" it will go outside and replace with "מאי" month.

Below are the hebrew months:

const hebrewMonthArray = [
    " ינוא",
    "פבר",
    "מרץ",
    "אפר׳",
    "מאי",
    "יוני",
    "יולי",
    "אוג׳",
    "ספט",
    "אוק'",
    "נוב׳",
    "דצמֲ",
  ];

I want the full implementation code in javascript with design as per the screenshot that I attached above.Thanks...