Как избежать повторения кода при создании вкладок с Jquery

Question

• 1000

Это код, который нацелен на миниатюры фотографий и отображает их в большом контейнере.

Код html: раздел миниатюр

<div class="product-slider-gallery">
     <div class="product-slider active mr-20">
         <img class="img-products" src="assets/images/cupboards/placard-81/placard81_1-thumb.jpg" alt="thumb-image-1">
     </div>
     <div class="product-slider mr-20">
         <img class="img-products" src="assets/images/cupboards/placard-81/placard81_2-thumb.jpg" alt="thumb-image-2">
     </div>
     <div class="product-slider mr-20">
         <img class="img-products" src="assets/images/cupboards/placard-81/placard81_3-thumb.jpg" alt="thumb-image-3">
     </div>
     <div class="product-slider mr-20">
         <img class="img-products" src="assets/images/cupboards/placard-81/placard81_4-thumb.jpg" alt="thumb-image-4">
     </div>
     <div class="product-slider mr-20">
         <img class="img-products" src="assets/images/cupboards/placard-81/placard81_5-thumb.jpg" alt="thumb-image-5">
     </div>
     <div class="product-slider mr-20">
         <img class="img-products" src="assets/images/cupboards/placard-81/placard81_6-thumb.jpg" alt="thumb-image-6">
     </div>
</div>

Раздел отображения больших изображений

<div id="slick-slide00show" class="product-image-wrapper custom-height">
   <img class="img-fluid curved-edges" src="assets/images/cupboards/placard-81/placard81_1.jpg" alt="plakar-1">
</div>
<div id="slick-slide01show" class="product-image-wrapper custom-height">
   <img class="img-fluid curved-edges" src="assets/images/cupboards/placard-81/placard81_2.jpg" alt="plakar-2">
</div>
<div id="slick-slide02show" class="product-image-wrapper custom-height">
   <img class="img-fluid curved-edges" src="assets/images/cupboards/placard-81/placard81_3.jpg" alt="plakar-3">
</div>
<div id="slick-slide03show" class="product-image-wrapper custom-height">
   <img class="img-fluid curved-edges" src="assets/images/cupboards/placard-81/placard81_4.jpg" alt="plakar-4">
</div>
<div id="slick-slide04show" class="product-image-wrapper custom-height">
   <img class="img-fluid curved-edges" src="assets/images/cupboards/placard-81/placard81_5.jpg" alt="plakar-5">
</div>
<div id="slick-slide05show" class="product-image-wrapper custom-height">
   <img class="img-fluid curved-edges" src="assets/images/cupboards/placard-81/placard81_6.jpg" alt="plakar-6">
</div>

Поскольку раздел эскизов содержится в гладком слайдере, я нацелен на id = "slick-slide01show". Как добиться того же кода jQuery, чтобы повторить раздел для другого отображения изображения (для другого продукта)? Я могу воспроизвести функциональность только тогда, когда я нацелен на классы со специальными именами, относящимися к этому разделу, но это означает, что мне нужно дублировать код jQuery для каждого используемого раздела, например:

let $firstShowcaseImage = $('.first-product-image-wrapper');
let $firstThumbnailImage = $('.first-product-slider');

let $secondShowcaseImage = $('.second-product-image-wrapper');
let $secondThumbnailImage = $('.second-product-slider');

Что-то вроде этого.

Заранее спасибо.