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;
  
  border:2px solid #63DFFB; 
  display: inline-block;
}

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 ;
let monPo = (now.getMonth()+6)%12 ;


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

 ko.addEventListener('mouseover', () => { 
  add(3);
});
 ko.addEventListener('mouseout', () => { 
  rem(3)
});
 po.addEventListener('mouseover', () => { 
    Array.from(document.querySelectorAll(Array.apply(null,Array(6)).map((el,i)=>`.top-wrp-hidden-right-wrp-button[value="${(monPo+i)%12+1}"]`).join(","))).forEach(e=>{
  	let span = document.createElement("span");
  	span.classList.add('selected');
    e.parentNode.insertBefore(span,e);
    span.insertBefore(e, null);
  }); 
});
 po.addEventListener('mouseout', () => { 
    Array.from(document.querySelectorAll(Array.apply(null,Array(6)).map((el,i)=>`.top-wrp-hidden-right-wrp-button[value="${(monPo+i)%12+1}"]`).join(","))).forEach(e=>{
  	let span = e.parentNode;
  	span.parentNode.insertBefore(e,span);
    span.parentNode.removeChild(span);
  }); 
});

 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=>{
  	let span = document.createElement("span");
  	span.classList.add('selected');
    e.parentNode.insertBefore(span,e);
    span.insertBefore(e, null);
  }); 
}
function rem(n){ 
  let c = Math.ceil(mon/n)*n;  
 ...