JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<div class="top-wrp-hidden-wrp">
  <div class="top-wrp-hidden-left">
    <ul class="top-wrp-hidden-left-list">
      <li class="top-wrp-hidden-left-item"><button class="top-wrp-hidden-left-item-btn-mo" name="month" value="13">месяц</button></li>
      <li class="top-wrp-hidden-left-item"><button class="top-wrp-hidden-left-item-btn-ko" name="month" value="14">квартал</button></li>
      <li class="top-wrp-hidden-left-item"><button class="top-wrp-hidden-left-item-btn-po" name="month" value="15">полугодие</button></li>
      <li class="top-wrp-hidden-left-item"><button class="top-wrp-hidden-left-item-btn-yo" name="month" value="16">год</button></li>
    </ul>
  </div>
  <div class="top-wrp-hidden-right">
    <div class="top-wrp-hidden-right-wrp">
      <button class="top-wrp-hidden-right-wrp-button" name="month" value="1">Январь</button>
      <button class="top-wrp-hidden-right-wrp-button" name="month" value="2">Февраль</button>
      <button class="top-wrp-hidden-right-wrp-button" name="month" value="3">Март</button>
      <button class="top-wrp-hidden-right-wrp-button" name="month" value="4">Апрель</button>
    </div>
    <div>
      <button class="top-wrp-hidden-right-wrp-button" name="month" value="5">Май</button>
      <button class="top-wrp-hidden-right-wrp-button" name="month" value="6">Июнь</button>
      <button class="top-wrp-hidden-right-wrp-button" name="month" value="7">Июль</button>
      <button class="top-wrp-hidden-right-wrp-button" name="month" value="8">Август</button>
    </div>
    <div>
      <button class="top-wrp-hidden-right-wrp-button" name="month" value="9">Сентябрь</button>
      <button class="top-wrp-hidden-right-wrp-button" name="month" value="10">Октябрь</button>
      <button class="top-wrp-hidden-right-wrp-button" name="month" value="11">Ноябрь</button>
      <button class="top-wrp-hidden-right-wrp-button" name="month" value="12">Декабрь</button>
    </div>
  </div>
</div>

CSS

.selected{
  margin:0;
  font-weight: #700;
  border-color:#63DFFB;
  color:#63DFFB;
}

JavaScript

//при на ведении на периоды выделять месяца
let mo = document.querySelector('.top-wrp-hidden-left-item-btn-mo'); //месяц
let ko = document.querySelector('.top-wrp-hidden-left-item-btn-ko'); //квартал
let po = document.querySelector('.top-wrp-hidden-left-item-btn-po'); //полугодие
let yo = document.querySelector('.top-wrp-hidden-left-item-btn-yo'); //год

let now = new Date();
let mon = now.getMonth()+1;

 mo.addEventListener('mouseover', () => { 
	add(1);
});
mo.addEventListener("mouseout", () => {
  rem(1);
});

 ko.addEventListener('mouseover', () => { 
  add(3);
});
 ko.addEventListener('mouseout', () => { 
  rem(3)
});
 po.addEventListener('mouseover', () => { 
 add(6);
});
 po.addEventListener('mouseout', () => { 
  rem(6);
});

 yo.addEventListener('mouseover', () => { 
 add(12);
});
 yo.addEventListener('mouseout', () => { 
  rem(12);
});

function add(n){ 
  let c = Math.ceil(mon/n)*n;
  Array.from(document.querySelectorAll(Array.apply(null,Array(n)).map((el,i)=>`.top-wrp-hidden-right-wrp-button[value="${c-i}"]`).join(","))).forEach(e=>e.classList.add('selected')); 
}
function rem(n){ 
  let c = Math.ceil(mon/n)*n;  
  Array.from(document.querySelectorAll(Array.apply(null,Array(n)).map((el,i)=>`.top-wrp-hidden-right-wrp-button[value="${c-i}"]`).join(","))).forEach(e=>e.classList.remove('selected')); 
}