Подскажите как можно улучшить код чтобы были табы

(function(){ 
/**/ const demo = document.getElementsByClassName('demo'); 
 
const colorpick = document.getElementsByClassName('colorpick'); 
const dropdown  = document.getElementsByClassName('dropdown'); 
let check = []; 
let index; 
for(let i = 0; i < colorpick.length; i++){ 
  check.push(0); /**/ demo[0].innerHTML = check; 
 
  colorpick[i].addEventListener('mouseenter', function(){ 
    index = i; /**/ demo[1].innerHTML = index; 
    for(let u = 0; u < dropdown.length; u++){dropdown[u].classList.add('INVIS');} 
    dropdown[i].classList.remove('INVIS'); 
  }); 
   
  dropdown[i].addEventListener('mouseleave',function(){ 
    this.classList.add('INVIS'); 
  }); 
} 
 
const clr   = document.getElementsByClassName('clr'); 
const color = document.getElementsByClassName('color'); 
 
for(let i = 0; i < color.length; i++){ 
  color[i].addEventListener('click',function(){ 
    if( this.className.match(/check/g) ){ 
      this.classList.remove('check'); 
      check[index] = check[index] - 1; 
    } else {this.classList.add('check'); check[index] = check[index] + 1;} 
      /**/ demo[2].innerHTML = check; 
      clr[index].innerText = '(' + check[index] + ')'; 
  }); 
} 
 
})();

.block {width: 30%} 
#colorpick { 
  text-align: center; 
  cursor: pointer; 
  box-sizing: border-box; /*важно для незаивисомти от padding*/ 
  padding: 5px; border: 1px solid #333; 
  user-select: none; /*Бесит, когда кликаешь и текст выделяется*/ 
} 
 
.color { 
  box-sizing: border-box; 
  padding: 2px 3px; 
  margin: 0 1px; 
  border-bottom: 1px solid #666; 
  /*relative важен, чтобы галочка не съехала*/ 
  position: relative; 
} 
 
.color:hover {background-color: #ffe2aa; cursor: pointer;} 
 
/*Это иконка галочки*/ 
.check:after { 
  content: ""; 
  position: absolute; 
  right: 5px; 
  width: 5px; height: 10px; 
  border-bottom: 2px solid #f36700; 
  border-right: 2px solid #f36700; 
  transform: rotate(40deg); 
} 
 
.INVIS {display: none;}

<span class="demo">0</span> — check.push(0); — создали массив, где для каждого селекта будет хранится изначально 0 (ноль выбранных) 
<br><span class="demo">0</span> — index (меняется при наведении на селект) 
<br><span class="demo">0</span> — check[index] = check[index] -/+ 1; // Вот и можно при клике на пункты, брать этот индекс и если был добавлен класс - галочку, прибавить к числу в массиве +1, а если убран класс, -1. А потом можно будет по этому же индексу полчить текущее значение и показать в кол-ве выбранных. 
<br><br> 
 
<div style="display: flex"> 
 
  <div class="block"> 
    <div class="colorpick"> Любимый цвет? ▼</div> 
    <div class="dropdown INVIS"> 
      <div class="total">Выбрано: <span class="clr">0</span></div> 
      <div class="color">Белый</div> 
      <div class="color">Черный</div> 
      <div class="color">Красный</div> 
      <div class="color">Оранжевский</div> 
      <div class="color">Филалетовый</div> 
      <div class="color">Каричнёвский</div> 
    </div> 
  </div> 
 
  <div class="block"> 
    <div class="colorpick"> Любимый цвет? ▼</div> 
    <div class="dropdown INVIS"> 
      <div class="total">Выбрано: <span class="clr">0</span></div> 
      <div class="color">Белый</div> 
      <div class="color">Черный</div> 
      <div class="color">Красный</div> 
      <div class="color">Оранжевский</div> 
      <div class="color">Филалетовый</div> 
      <div class="color">Каричнёвский</div> 
    </div> 
  </div> 
 
  <div class="block"> 
    <div class="colorpick"> Любимый цвет? ▼</div> 
    <div class="dropdown INVIS"> 
      <div class="total">Выбрано: <span class="clr">0</span></div> 
      <div class="color">Белый</div> 
      <div class="color">Черный</div> 
      <div class="color">Красный</div> 
      <div class="color">Оранжевский</div> 
      <div class="color">Филалетовый</div> 
      <div class="color">Каричнёвский</div> 
    </div> 
  </div> 
 
</div>