JSFiddle - React, Tailwind, and code Playground

HTML

<div class="l-product__column-lt">
                <div class="product__detailImage">
                    <!--item-->
                    <div class="product__detailImage__item-1 item m-active">
                        Это блок 1
                    </div>
                    <!--item-->
                    <div class="product__detailImage__item-2 item">
                       Это блок 2
                    </div>
                    <!--item-->
                    <div class="product__detailImage__item-3 item">
                    Это блок 3
                    </div>
                    <!--item-->
                    <div class="product__detailImage__item-4 item">
                    Это блок 4
                    </div>
                </div>
            </div>
            <div class="l-product__column-ctr">
                <div class="product__thumbImage">
                    <!--thumb-->
                    <div class="product__thumbImage__item item-1 m-active">
                    Это блок 1
                    </div>
                    <!--thumb-->
                    <div class="product__thumbImage__item item-2">
                    Это блок 2
                    </div>
                    <!--thumb-->
                    <div class="product__thumbImage__item item-3">
                        Это блок 3
                    </div>
                    <!--thumb-->
                    <div class="product__thumbImage__item item-4">
                        Это блок 4
                    </div>
                </div>
               
            </div>

CSS

.l-product__column-lt{float:left;}
.l-product__column-ctr{float: left;width:180px;}

.product__detailImage{
  position: relative;
  width:440px;height: 440px;
  border:1px solid #000;
  margin: 0 60px 0 30px;
  overflow: hidden;
}
.product__detailImage .item{
   visibility: hidden;
    position:absolute;
   
}
.product__detailImage .item.m-active{visibility: visible;}

.product__thumbImage{
  position: relative;
}
.product__thumbImage__item{
  cursor: pointer;
  float: left;
  display: block;
  overflow: hidden;
  margin:10px 10px 10px 0;
  border: solid 1px #dadada;
}
.product__thumbImage__item.m-active{border-color: red;}

JavaScript

$(function(){
    var thumbs = $('.product__thumbImage__item');
    var detailed = $('.product__detailImage .item');
    $(thumbs).each(function(){
        $(this).click(function(){
            $(thumbs).removeClass('m-active');
            $(detailed).removeClass('m-active');
//            for(var i=1;i<=thumbs.length;i++){
//                var t = 'item-' +[i];
//                var d = '.product__detailImage__item-' +[i];
//                if($(this).hasClass(t)){
//                    $(this).addClass('m-active');
//                    $(d).addClass('m-active');
//                }
//                else{return false;}
//            }
            if($(this).hasClass('item-1')){
                $(this).addClass('m-active');
                $('.product__detailImage__item-1').addClass('m-active');
            }
            else if($(this).hasClass('item-2')){
                $(this).addClass('m-active');
                $('.product__detailImage__item-2').addClass('m-active');
            }
            else if($(this).hasClass('item-3')){
                $(this).addClass('m-active');
                $('.product__detailImage__item-3').addClass('m-active');
            }
            else if($(this).hasClass('item-4')){
                $(this).addClass('m-active');
                $('.product__detailImage__item-4').addClass('m-active');
            }
            else{return false}
        });
    });
});