JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Добавляем поле с видом покрытия  -->

<div class="t-product__option js-product-option newselect">
  <div class="t-product__option-title t-descr t-descr_xxs js-product-option-name">Вид покрытия:</div>
    <div class="t-product__option-variants">
      <select id="pokr" class="t-product__option-select t-descr t-descr_xxs js-product-option-variants">
         <option value="Без покрытия" data-product-variant-price="0">Без покрытия</option>
         <option value="Морилка" data-product-variant-price="0.2">Морилка</option>
         <option value="Лак" data-product-variant-price="0.3">Лак</option>
         <option value="Акрил" data-product-variant-price="0.5">Акрил</option>
      </select>
  </div>
</div>

<!--Код для добавления палитры цветов в карточки товаров-->
<div class="t-product__option js-product-option newselect">
  <div class="t-product__option-title t-descr t-descr_xxs js-product-option-name">Цвет:</div>
	<div class="t-product__option-variants">
		<select id="colors" class="t-product__option-select t-descr t-descr_xxs js-product-option-variants">
      <option id="first2" disabled selected></option>
<optgroup label="Без покрытия">
    <option value=""></option>
</optgroup>
<optgroup label="Морилка">
    <option value="Бесцветный" class="icon-stain-colorless">Бесцветный</option>
    <option value="Сосна" class="icon-stain-pine">Сосна</option>
    <option value="Тик" class="icon-stain-teak">Тик</option>
    <option value="Орех" class="icon-stain-nut">Орех</option>
    <option value="Махагон" class="icon-stain-mahogany">Махагон</option>
    <option value="Темный дуб" class="icon-stain-dark-oak">Темный дуб</option>
    <option value="Палисандр" class="icon-stain-rosewood">Палисандр</option>
    <option value="Каштан" class="icon-stain-chestnut">Каштан</option>
    <option value="Рябина" class="icon-stain-rowanberry">Рябина</option>
    <option value="Белый" class="icon-stain-white">Белый</option>
    <option value="Золотой бор"...

CSS

#pokr{
  width:180px;
}
#colors{
  width:180px;
}
.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
{
    background: url('https://i.ibb.co/h9ZQ682/stain-chestnut.png') no-repeat;
    background-size: 20px;
    padding-left: 30px;
    background-position: 3px 1px;
}

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

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

.icon-stain-golden-forest
{
    background:...

JavaScript

function cleanSelect (select) {
    // Очищаем от стилей
    return $(select).removeClass('icon-stain-colorless').removeClass('icon-stain-pine')
}
    // Формируем select и его обработчики
    function formSelect() {
    // получаем выпадающий список с уже очищенными классами
    var select = cleanSelect('.t-product__option-select');

    // Добавляем класс, который соответствует выбранному элементу
    select.addClass(select.val() == '1' ? 'icon-stain-colorless' : 'icon-stain-pine');

    // Определяем обработчик на событие ухода мышки с области элемента
    select.on('mouseleave', function () {
        // Устанавливаем обычный размер
        this.size = 1;
        // Добавляем класс стиля в соответствии с выбранным элементом
        cleanSelect(this).addClass($(this).val() == '1' ? 'icon-stain-colorless' : 'icon-stain-pine');
    });

    // Определяем обработчик на событие ухода мышки с области элемента
    select.on('mouseover', function () {
        // Очищаем стиль списка, чтобы он не мешал отображению
        cleanSelect(this);
        // Устанавливаем размер, равный количеству элементов
        this.size = $(this).find('option').length;
    });
}

    // После загрузки DOM - получаем список
    $(function () {
        formSelect();
    });
  var optGroup = {};
$(function () {
  // remove from second list all optgroup and save them in a global variable
  $('#colors optgroup').each(function(index, element) {
    optGroup[element.label] = {'optGroup': element};
    $('#colors optgroup:eq(0)').remove();
  });

  $('#pokr').change(function(){
    // remove the attached optgroup
    $('#colors optgroup').remove();
    // search for the saved optgroup and attach it to the select
    $(optGroup[this.value].optGroup).appendTo('#colors');
    $('#colors optgroup option:selected').removeAttr("selected");
    $('#first2').prop('selected', true);
  });
});