JSFiddle - React, Tailwind, and code Playground

HTML

<div class="calendar-table-container">
                                <div id="calendar-table-1" class="calendar-table">
                                    <button id="go-back"><img id='go-back-icon' src="../../assets/icons/Back Arrow.png" /></button>
                                    <div id="month-name-1" class="month-name"></div>
                                    <div class="day-name">Su</div>
                                    <div class="day-name">M</div>
                                    <div class="day-name">Tu</div>
                                    <div class="day-name">W</div>
                                    <div class="day-name">Th</div>
                                    <div class="day-name">F</div>
                                    <div class="day-name">Sa</div>
                                    <!-- get JS module -->
                                </div>
                                <div id="calendar-table-2" class="calendar-table">
                                    <div id="month-name-2" class="month-name"></div>
                                    <button id="go-ahead"><img id="go-ahead-icon" src="../../assets/icons/Forward Button.png" /></button>
                                    <div class="day-name">Su</div>
                                    <div class="day-name">M</div>
                                    <div class="day-name">Tu</div>
                                    <div class="day-name">W</div>
                                    <div class="day-name">Th</div>
                                    <div class="day-name">F</div>
                                    <div class="day-name">Sa</div>
                                </div>
                            </div>

CSS

& .calendar-table-container {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    column-gap: 3em;

                    & button {
                        border: none;

                        &:hover {
                            background-color: transparent;
                            opacity: 0.5;
                        }

                        & img {
                            width: 25px;
                        }
                    }

                    & #calendar-table-1 {
                        & .month-name {
                            grid-column: 2 / -1; 
                        }
                        & button {
                            grid-column: 1 / 2;
                        }
                    }
    
                    & #calendar-table-2 {
                        & .month-name {
                            grid-column: 1 / -2; 
                        }
                        & button {
                            grid-column: -2 / -1;
                        }
                    }

                    
                }

                & .calendar-table {
                    display: grid;
                    grid-template-columns: repeat(7, 1fr);

                    & .month-name {
                        text-transform: uppercase;
                        width: 100%;
                        font-weight: 500;
                    }

                    & > div {
                        display: flex;
                        flex-flow: column nowrap;
                        align-items: center;
                        justify-content: center;
                        width: 50px;
                        height: 50px;
                        // border: 1px solid variables.$border-color;
                        margin: 0;
                        padding: 0;
                        border: 2px solid transparent;
                        border-radius: 5px;
       ...

JavaScript

const monthName1 = document.querySelector("#month-name-1");
const monthName2 = document.querySelector("#month-name-2");
const goAheadBtn = document.querySelector("#go-ahead");
const calendarTable2 = document.querySelector("#calendar-table-2");


let currDateTime = new Date();
const monthNames = [
    "January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
];

setCalendar();

function goAhead() {

    currDateTime.setMonth(currDateTime.getMonth() + 1);
    unsetCalendar();
    setCalendar(currDateTime);

}

function unsetCalendar() {
    
    const dayBoxes = document.querySelectorAll(".calendar-table-container .day-box");
    const blankBoxes = document.querySelectorAll(".calendar-table-container .blank-box");

    monthName1.innerHTML = '';
    monthName2.innerHTML = '';

    dayBoxes.forEach(box => {
        box.remove();
    })

    blankBoxes.forEach(box => {
        box.remove();
    })

}

function setCalendar() {
    let currYear = currDateTime.getFullYear();
    let nextYear = currDateTime.getFullYear();

    let currMonth  = currDateTime.getMonth() + 1;
    let nextMonth  = currDateTime.getMonth() + 2;

    nextYear = currMonth == 12 ? nextYear + 1 : nextYear;
  
    monthName1.innerText = `${monthNames[currMonth - 1]} ${currYear}`;
   
    if(nextMonth - 1 === 12) {
        console.log(`Setting months: ${monthNames[currMonth - 1]} ${currYear}, ${monthNames[0]} ${nextYear}`);
        monthName2.innerText = `${monthNames[0]} ${nextYear}`;
    } else {
        console.log(`Setting months: ${monthNames[currMonth - 1]} ${currYear}, ${monthNames[nextMonth - 1]} ${nextYear}`);
        monthName2.innerText = `${monthNames[nextMonth - 1]} ${nextYear}`;
    }  
}

calendarTable2.addEventListener('click', (e) => {
    const target = e.target;

    if(target.id === 'go-ahead' || target.id === 'go-ahead-icon') {
        goAhead();
    } 
    else if(target.classList.contains('day-box')) {
       ...