jQuery - Limit on click events to happen only in single element

Question

Hey :) I'm working on a WordPress project and I got stuck.. I have a while cycle in my php that is outputing boxes with content inside. The HTML structure for each box is with the same classes.. Inside the boxes there are 4 inner boxes that on click are expanding. The first inner box should by default have active state. So here is my question. With jQuery I'm adding active class on the first inner box for each parent box, then on click on the inner box, I'm adding a class active to it and I'm removing the active class on the rest. But this is also clearing the active classes on all other parent boxes.. Is there a way to limit it to the parent box that the click originated from?

$('.inner-card').on('click', function() {
  $(this).toggleClass('active');
  $('.inner-card').not($(this)).removeClass('active');
});

.card {
  text-align: center;
  box-shadow: 0px 0px 6px black;
  padding: 20px 30px 0;
  border-bottom: 10px solid darkmagenta;
  margin-bottom: 30px;
}

.inner-card__content {
  width: 100%;
}

.inner-card {
  width: calc((100% / 4) - 10px);
  display: inline-block;
  border: 1px solid;
  text-align: center;
}

.inner-card__icon {
  font-weight: bolder;
  font-size: 20px;
}

.inner-card__title {
  font-weight: bolder;
}

.inner-card__content {
 display: none;
}

.inner-card.active .inner-card__content {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
  <h5>Card Title</h5>
  
  <div class="inner-cards-container">
    <div class="inner-card active">
      <div class="inner-card__icon">
        <span>+</span>
      </div>

      <div class="inner-card__title">
        <p>Lorem Ipsum</p>
      </div>

      <div class="inner-card__content">
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
      </div>
    </div>
    
    <div class="inner-card">
      <div class="inner-card__icon">
        <span>+</span>
      </div>

      <div class="inner-card__title">
        <p>Lorem Ipsum</p>
      </div>

      <div class="inner-card__content">
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
      </div>
    </div>
    
    <div class="inner-card">
      <div class="inner-card__icon">
        <span>+</span>
      </div>

      <div class="inner-card__title">
        <p>Lorem Ipsum</p>
      </div>

      <div class="inner-card__content">
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
      </div>
    </div>
    
    <div class="inner-card">
      <div class="inner-card__icon">
        <span>+</span>
      </div>

      <div class="inner-card__title">
        <p>Lorem Ipsum</p>
      </div>

      <div class="inner-card__content">
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
      </div>
    </div>
  </div>
</div>

<div class="card">
  <h5>Card Title</h5>
  
  <div class="inner-cards-container">
    <div class="inner-card active">
      <div class="inner-card__icon">
        <span>+</span>
      </div>

      <div class="inner-card__title">
        <p>Lorem Ipsum</p>
      </div>

      <div class="inner-card__content">
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
      </div>
    </div>
    
    <div class="inner-card">
      <div class="inner-card__icon">
        <span>+</span>
      </div>

      <div class="inner-card__title">
        <p>Lorem Ipsum</p>
      </div>

      <div class="inner-card__content">
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
      </div>
    </div>
    
    <div class="inner-card">
      <div class="inner-card__icon">
        <span>+</span>
      </div>

      <div class="inner-card__title">
        <p>Lorem Ipsum</p>
      </div>

      <div class="inner-card__content">
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
      </div>
    </div>
    
    <div class="inner-card">
      <div class="inner-card__icon">
        <span>+</span>
      </div>

      <div class="inner-card__title">
        <p>Lorem Ipsum</p>
      </div>

      <div class="inner-card__content">
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
      </div>
    </div>
  </div>
</div>

Answer 1

Use $(this).closest(".inner-cards-container") to limit it to the current container.

$('.inner-card').on('click', function() {
  $(this).toggleClass('active');
  $(this).closest(".inner-cards-container").find('.inner-card').not($(this)).removeClass('active');
});

.card {
  text-align: center;
  box-shadow: 0px 0px 6px black;
  padding: 20px 30px 0;
  border-bottom: 10px solid darkmagenta;
  margin-bottom: 30px;
}

.inner-card__content {
  width: 100%;
}

.inner-card {
  width: calc((100% / 4) - 10px);
  display: inline-block;
  border: 1px solid;
  text-align: center;
}

.inner-card__icon {
  font-weight: bolder;
  font-size: 20px;
}

.inner-card__title {
  font-weight: bolder;
}

.inner-card__content {
 display: none;
}

.inner-card.active .inner-card__content {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
  <h5>Card Title</h5>
  
  <div class="inner-cards-container">
    <div class="inner-card active">
      <div class="inner-card__icon">
        <span>+</span>
      </div>

      <div class="inner-card__title">
        <p>Lorem Ipsum</p>
      </div>

      <div class="inner-card__content">
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
      </div>
    </div>
    
    <div class="inner-card">
      <div class="inner-card__icon">
        <span>+</span>
      </div>

      <div class="inner-card__title">
        <p>Lorem Ipsum</p>
      </div>

      <div class="inner-card__content">
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
      </div>
    </div>
    
    <div class="inner-card">
      <div class="inner-card__icon">
        <span>+</span>
      </div>

      <div class="inner-card__title">
        <p>Lorem Ipsum</p>
      </div>

      <div class="inner-card__content">
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
      </div>
    </div>
    
    <div class="inner-card">
      <div class="inner-card__icon">
        <span>+</span>
      </div>

      <div class="inner-card__title">
        <p>Lorem Ipsum</p>
      </div>

      <div class="inner-card__content">
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
      </div>
    </div>
  </div>
</div>

<div class="card">
  <h5>Card Title</h5>
  
  <div class="inner-cards-container">
    <div class="inner-card active">
      <div class="inner-card__icon">
        <span>+</span>
      </div>

      <div class="inner-card__title">
        <p>Lorem Ipsum</p>
      </div>

      <div class="inner-card__content">
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
      </div>
    </div>
    
    <div class="inner-card">
      <div class="inner-card__icon">
        <span>+</span>
      </div>

      <div class="inner-card__title">
        <p>Lorem Ipsum</p>
      </div>

      <div class="inner-card__content">
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
      </div>
    </div>
    
    <div class="inner-card">
      <div class="inner-card__icon">
        <span>+</span>
      </div>

      <div class="inner-card__title">
        <p>Lorem Ipsum</p>
      </div>

      <div class="inner-card__content">
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
      </div>
    </div>
    
    <div class="inner-card">
      <div class="inner-card__icon">
        <span>+</span>
      </div>

      <div class="inner-card__title">
        <p>Lorem Ipsum</p>
      </div>

      <div class="inner-card__content">
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
      </div>
    </div>
  </div>
</div>