JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
  <div class="detail-cart">
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">



      <div style="display: inline-block;vertical-align: top; width: 100%;">
        <div>
          <img itemprop="image" id="zoom_0" src="/img/small/ferdinanda.jpg" data-zoom-image-0="/img/large/ferdinanda.jpg" style="max-width: 585px; width: 100%;">
          <!-- Разметка изображения товара -->
        </div>
      </div>

      <div class="cutting row">
        <div class="owl-carousel owl-loaded owl-drag" id="compare-additional-0">
          <!-- Доп. блоки -->
          <!-- Доп. блоки -->
          <!-- Доп. блоки -->
          <!-- Доп. блоки -->
          <!-- Доп. блоки -->
          <div class="owl-stage-outer">
            <div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: 0.25s; width: 682px;">
              <div class="owl-item active" style="width: 86.25px; margin-right: 50px;">
                <div id="owl-item-0" class="owl-item"><img data-min="ferdinanda" src="/img/miniatures/ferdinanda.jpg"></div>
              </div>
              <div class="owl-item active" style="width: 86.25px; margin-right: 50px;">
                <div id="owl-item-0" class="owl-item"><img data-min="ferdinanda_2" src="/img/miniatures/ferdinanda_2.jpg"></div>
              </div>
              <div class="owl-item active" style="width: 86.25px; margin-right: 50px;">
                <div id="owl-item-0" class="owl-item"><img data-min="ferdinanda_3" src="/img/miniatures/ferdinanda_3.jpg"></div>
              </div>
              <div class="owl-item active" style="width: 86.25px; margin-right: 50px;">
                <div id="owl-item-0" class="owl-item"><img data-min="ferdinanda_4" src="/img/miniatures/ferdinanda_4.jpg"></div>
              </div>
              <div class="owl-item" style="width: 86.25px; margin-right: 50px;">
                <div id="owl-item-0" class="owl-item"><img data-min="" src="/img/miniatures/.jpg"></div>
           ...

JavaScript

$('div#owl-item-0.owl-item img').on('click',function () {
        var miniatures = $(this).data('min');
        var img = $('#zoom_0');
        //src="/img/small/ferdinanda.jpg" data-zoom-image="/img/large/ferdinanda.jpg"
        var old_img_src = img.attr('src');
        var new_img_src = img.attr('src','/img/small/'+miniatures+'.jpg');
        img.data('zoom-image-0','/img/large/'+miniatures+'.jpg');
        $('div.zoomWindowContainer').css("background-image","url('/img/large/"+miniatures+".jpg')");
    });
    $('div#owl-item-1.owl-item img').on('click',function () {
        var miniatures = $(this).data('min');
        var img = $('#zoom_1');
        //src="/img/small/ferdinanda.jpg" data-zoom-image="/img/large/ferdinanda.jpg"
        var old_img_src = img.attr('src');
        var new_img_src = img.attr('src','/img/small/'+miniatures+'.jpg');
        img.data('zoom-image-1','/img/large/'+miniatures+'.jpg');
       $('div.zoomWindowContainer').css("background-image","url('/img/large/"+miniatures+".jpg')");
    });