Copy active class from one div to another div with a corresponding data attribute value

Is there a way to toggle the class selected that is currently set on the button in .ProductItem-gallery-slides to the corresponding button in .ProductItem-gallery-thumbnails with the same data attribute?

<div class="ProductItem-gallery-scroll">
  <div class="ProductItem-gallery-thumbnails">
    <button class="ProductItem-gallery-thumbnails-item" data-thumbnail-index="1"> Hello 1 </button>
    <button class="ProductItem-gallery-thumbnails-item" data-thumbnail-index="2"> Hello 2 </button>
    <button class="ProductItem-gallery-thumbnails-item" data-thumbnail-index="3"> Hello 3 </button>
  </div>
</div>

<div class="ProductItem-gallery-slides" data-animation-role="image" data-product-gallery="slides">
  <button class="ProductItem-gallery-slides-item selected" data-slide-index="1"> Good bye 1</button>
  <button class="ProductItem-gallery-slides-item" data-slide-index="2">Good bye 2</button>
  <button class="ProductItem-gallery-slides-item" data-slide-index="3">Good bye 3</button>
</div>

Answer

Whilst I agree with Rory – I suspect there is no example code so I hope the following is what you’re after:

$('.ProductItem-gallery-thumbnails-item').on('click',function(){
    $('.ProductItem-gallery-slides-item').removeClass('selected');
    
    $('.ProductItem-gallery-slides-item[data-slide-index="'+$(this).data('thumbnail-index')+'"]').addClass('selected');
})