JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="card">
    <h1>Название товара</h1>
    <ul>
      <li class="color-pic pic-1"></li>
      <li class="color-pic pic-2"></li>
      <li class="color-pic pic-3"></li>
      <li class="color-pic pic-4"></li>
      <li class="color-pic pic-5"></li>
    </ul>
    <div class="photo">
      <img class="tovar active"...

CSS

.wrapper {
  display: flex;
}

.card {
 width: 300px;
 height: 400px;
 border: 1px solid red;
 margin-right: 40px;
}

.color-pic {
  width: 10px;
  height: 10px;
  margin-bottom: 10px;
}

.pic-1 {
  background-color: #000;
}

.pic-2 {
  background-color: yellow;
}

.pic-3 {
  background-color: green;
}

.pic-4 {
  background-color: brown;
}
.pic-5 {
  background-color: orange;
}

.photo {
  position: relative;
  width: 100px;
  height: 100px;
}

img {
  width: 100%;
  position: absolute;
  opacity: 0;
}

.active {
  opacity: 1;
}

JavaScript

var $button = $('.card .color-pic');

$button.on('click', function () {
  var n=$(this).index();
  
  $(`.card:nth-child(${$(this).parents('.card').index()+1}) .tovar`).removeClass("active");
  $(`.card:nth-child(${$(this).parents('.card').index()+1}) .tovar`).eq(n).addClass("active");

});