Как добавить класс на jquery другому блоку, только одному элементу

В общем новичок в этом деле, помогите. Задача такая, есть условно два блока карточек, при нажатии на "Подробнее", вместо блока price__card-visible, должна появляться price__card-hidden, это сделал при помощи класса active

<div class="price__cards">
         <div class="price__card price__card-1">
             <div class="price__card-visible active">
                  <div class="price__card-more">Подробнее</div>
             </div>
             <div class="price__card-hidden">
             </div>
         </div>  
         <div class="price__card price__card-2">
             <div class="price__card-visible active">
                  <div class="price__card-more">Подробнее</div>
             </div>
             <div class="price__card-hidden">
             </div>
         </div>
    </div>

и есть такой jquery, Но он добавляет всем карточкам класс, как сделать чтобы только добавлялось необходимому элементу

$(document).ready(function(){
  $('.price__card-more').click(function(){
    $('.price__card-hidden').addClass('active');
    $('.price__card-visible').removeClass('active');
  });
});