How to add class to specific elements?

Question

I have the following:

<figure class="itemImage">
  <span title="Camiseta preta O Poderoso Chefão" style="background:url('img');background-size:cover;background-position:center;"></span>
  <div class="price">
    50,00R$
  </div>
 <div class="postButtons">
   <span>icone compra</span>
   <span class="moreinfobtn">icone info</span>
 </div>
 <div class="moreInfo">
   <p>Tamanhos: P M G GG</p>
   <p>Tecido assim e assado</p>
 </div>
</figure>

<figure class="itemImage">
  <span title="Camiseta preta O Poderoso Chefão" style="background:url('img');background-size:cover;background-position:center;"></span>
  <div class="price">
    50,00R$
  </div>
 <div class="postButtons">
   <span>icone compra</span>
   <span class="moreinfobtn">icone info</span>
 </div>
 <div class="moreInfo">
   <p>Tamanhos: P M G GG</p>
   <p>Tecido assim e assado</p>
 </div>
</figure>

<script>
  $(document).ready(function(){
    $( "#postWrap .postButtons .moreinfobtn" ).click(function() {
      $("#postWrap .moreInfo").toggleClass("moreInfoactive");
    });
  });
</script>

In that code every tag figure contains a div with class "moreInfo", where I put the information of each t-shirt. This class at first is hidden, and that’s where the small script comes in at the end. By clicking the "moreinfobtn" button, the "moreInfoactive" class is added to the "moreInfo", displaying the information of each T-shirt.

But when I click on the button it adds the class to all the tags that contain the "moreInfo" class in the theme, which needed it to display only the post in question. Causing an effect like the one in the image below, notice that even when I clicked on the first post button, it displayed all the information. How can I solve?

Answer 1

Alter your JS to catch the tag figure that surrounds the clicked button:

   $(document).ready(function(){
        $( ".moreinfobtn" ).click(function() {
          $(this).closest('figure').find('.moreInfo').toggleClass("moreInfoactive");
        });
      });

Test below:

  $(document).ready(function(){
    $( ".moreinfobtn" ).click(function() {
      $(this).closest('figure').find('.moreInfo').toggleClass("moreInfoactive");
    });
  });

.moreInfo {
display: none;}

.moreInfo.moreInfoactive {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<figure class="itemImage">
  <span title="Camiseta preta O Poderoso Chefão" style="background:url('img');background-size:cover;background-position:center;"></span>
  <div class="price">
    50,00R$
  </div>
 <div class="postButtons">
   <span>icone compra</span>
   <span class="moreinfobtn">[icone info]</span>
 </div>
 <div class="moreInfo">
   <p>Tamanhos: P M G GG</p>
   <p>Tecido assim e assado</p>
 </div>
</figure>

<figure class="itemImage">
  <span title="Camiseta preta O Poderoso Chefão" style="background:url('img');background-size:cover;background-position:center;"></span>
  <div class="price">
    50,00R$
  </div>
 <div class="postButtons">
   <span>icone compra</span>
   <span class="moreinfobtn">[icone info]</span>
 </div>
 <div class="moreInfo">
   <p>Tamanhos: P M G GG</p>
   <p>Tecido assim e assado</p>
 </div>
</figure>

Answer 2

Another way to do it and this way:

$(document).on('click' , '.moreinfobtn' ,  function(){
       $(this).parent().parent().find(".moreInfo").toggleClass("moreInfoactive");
});