JSFiddle - React, Tailwind, and code Playground

HTML

<div>Вид покрытия:</div>
<div class="select">
  <input type="text" id="pokr" class="triger" value="Без покрытия">
  <label for="pokr">Без покрытия</label>
  <div class="list">
    <div data-dependent="">
      <div data-affect="colors" data-product-variant-price="0">Без покрытия</div>
      <div data-affect="colors" data-product-variant-price="0.2">Морилка</div>
      <div data-affect="colors" data-product-variant-price="0.3">Лак</div>
      <div data-affect="colors" data-product-variant-price="0.5">Акрил</div>
    </div>
  </div>
</div>
<div>Цвет:</div>
<div class="select">
  <input type="text" id="colors" class="triger" value="">
  <label for="colors"></label>
  <div class="list">
    <div data-dependent="Морилка" class="hidden">
      <div class="icon-stain-colorless">Бесцветный</div>
      <div class="icon-stain-pine">Сосна</div>
      <div class="icon-stain-teak">Тик</div>
      <div class="icon-stain-nut">Орех</div>
      <div class="icon-stain-mahogany">Махагон</div>
      <div class="icon-stain-dark-oak">Темный дуб</div>
      <div class="icon-stain-rosewood">Палисандр</div>
      <div class="icon-stain-chestnut">Каштан</div>
      <div class="icon-stain-rowanberry">Рябина</div>
      <div class="icon-stain-white">Белый</div>
      <div class="icon-stain-golden-forest">Золотой бор</div>
      <div class="icon-stain-oak">Дуб</div>
    </div>
    <div data-dependent="Лак" class="hidden">
      <div class="icon-varnish-colorless">Бесцветный</div>
    </div>
    <div data-dependent="Акрил" class="hidden">
      <div class="icon-acrylic-white">Белая</div>
      <div class="icon-acrylic-black">Черная</div>
      <div class="icon-acrylic-lemon">Лимонная</div>
      <div class="icon-acrylic-yellow-mid">Желтая</div>
      <div class="icon-acrylic-dark-yellow">Темно-желтая</div>
      <div class="icon-acrylic-light-ochre">Охра светлая</div>
      <div class="icon-acrylic-orange">Оранжевая</div>
      <div class="icon-acrylic-red">Красная</div>
      <div...

CSS

.select{
  position:relative;
  width:150px;
}
.select label{
  display:block;
  width:100%;
  height:18px;
  border:1px solid #bbb;
  box-sizing:border-box;
  cursor:pointer;
}
.list{
  position:absolute;
  top:0;
  width:100%;
  max-height:0px;
  background:#fff;
  border:1px solid #bbb;
  box-sizing:border-box;
  opacity:0;
  z-index:2;
  overflow:hidden;
  transition: all 0.2s ease-out 0.2s;
}
.list div{
  cursor:pointer;
}
.hidden{
  display:none;
}
.triger{
  position:absolute;
  width:0;
  height:0;
  border:0;
  margin:0;
  padding:0;
  opacity:0;
}
.triger:focus~.list{
  max-height:99999px;
  opacity:1;
  transition: all 0.2s ease-out 0.0s;
}











.icon-stain-colorless
{
    background: url('https://i.ibb.co/hdJxxvM/stain-colorless.png') no-repeat;
    background-size: 20px;
    padding-left: 30px;
    background-position: 3px 1px;
}

.icon-stain-pine
{
    background: url('https://i.ibb.co/KXCF2pC/stain-pine.png') no-repeat;
    background-size: 20px;
    padding-left: 30px;
    background-position: 3px 1px;
}

.icon-stain-teak
{
    background: url('https://i.ibb.co/TTkbVKT/stain-teak.png') no-repeat;
    background-size: 20px;
    padding-left: 30px;
    background-position: 3px 1px;
}

.icon-stain-nut
{
    background: url('https://i.ibb.co/TTHQtkQ/stain-nuts.png') no-repeat;
    background-size: 20px;
    padding-left: 30px;
    background-position: 3px 1px;
}

.icon-stain-mahogany
{
    background: url('https://i.ibb.co/nCs2sBT/stain-mahogany.png') no-repeat;
    background-size: 20px;
    padding-left: 30px;
    background-position: 3px 1px;
}

.icon-stain-dark-oak
{
    background: url('https://i.ibb.co/TbWNk79/stain-dark-oak.png') no-repeat;
    background-size: 20px;
    padding-left: 30px;
    background-position: 3px 1px;
}

.icon-stain-rosewood
{
    background: url('https://i.ibb.co/bzMfcZ9/stain-rosewood.png') no-repeat;
    background-size: 20px;
    padding-left: 30px;
    background-position: 3px 1px;
}

.icon-stain-chestnut
{
   ...

JavaScript

$(function(){
	$('.select .list>div>div').on('click',function(){
  	var this_value = $(this).html();
    var this_class = $(this).attr('class');
    if(this_class === undefined) this_class = '';
  	var this_affect = $(this).attr('data-affect');
    if(this_affect === undefined) this_affect = '';
    var this_select = $(this).parents('.select').first().get(0);
    var this_label = $(this_select).find('label').first().get(0);
    var affect_select = undefined;
    if(this_affect) affect_select = $('#'+this_affect).parents('.select').first().get(0);
    
    $(this_label).removeClass().addClass(this_class).html(this_value);
    
    if(affect_select){
    	var affect_label = $(affect_select).find('label').first().get(0);
    	var affect_list = $(affect_select).find('.list').first().get(0);
      $(affect_label).removeClass().html('');
      $(affect_list).children('div').addClass('hidden');
    	$(affect_select).find('div[data-dependent="'+this_value+'"]').removeClass('hidden');
    }
  })
});