Jquery toggle does not hide/show specific element

I am trying to hide/show a variations form for each product. Basically if the user clicks on the quick shop button, the variation form related to that product will open. If they select it again, it will hide it for that product.

The problem is that I don't know how to hide or show it specifically for the product which the quick shop button belongs to. The html is derived from woocommerce so I will be unable to go into the html and provide separate ids to differentiate.

Here is some screenshots on what happens at the moment:

Here are three products, each with their own quick shop button (ignore and apologies for the mute speaker on the icon)

I select the middle product's quick shop button but as you can see it opens up the variation form for the first product:

Then when I click on the middle quick shop button again to hide the variation form, instead it opens all variation forms:

So yeah, that's my issue. Help please :)

Jquery:

  $(document).ready(function() {
    
   jQuery( '.quick_shop' ).click(function() {     
   jQuery('.variations_form').toggle('slide', { direction: 'down' }, 300);
});
});

HTML:

<div class="quick_shop_container">
  <button class="quick_shop">
    <span class="quick_shop_text">Quick Shop &nbsp;</span>
      <span class="quick_shop_price"> 
 | From £24.99   </span>
  </button> 
</div>

<form class=“variations_form”>
//REST OF FORM UNDERNEATH

CSS:

.variations_form{
    display:none;
}

HTML code structure (manipulated code best I can to remove unneeded code):

`<ul class="products columns-3">
   <li class="pif-has-gallery  column-1_3 product type-product">
      <div class="post_item_wrap">
         <div class="post_featured">
            <div class="post_thumb">
               <a class="hover_icon hover_icon_link" href="">
                  <div class="container-image-and-badge  ">
                     <img>
                        <div class="yith-wcbm-badge__wrap">
                           <img>            
                        </div>
                        <!--yith-wcbm-badge__wrap-->
                     </div>
                     <!--yith-wcbm-badge-->
                  </div>
                  <!--container-image-and-badge-->
<img>               
               </a>
            </div>
         </div>
         <div class="post_content">
            <a class="" href="xxx?product=espresso-coffee-taster-pack">
            </a>
            <div class="quick_shop_container">
               <button class="quick_shop">
               <span class="quick_shop_text">Quick Shop &nbsp;</span>
               <span class="quick_shop_price"> 
               | From £24.99      </span>
               </button> 
            </div>
           <form class="variations_form">
            ...
            </form>
         </div>
      </div>
   </li>
   <li class="pif-has-gallery  column-1_3 product type-product">
      <div class="post_item_wrap">
         <div class="post_featured">
            <div class="post_thumb">
               <a class="hover_icon hover_icon_link" href="xxx?product=speciality-coffee-taster-pack">
                  <div class="container-image-and-badge  ">
                     <img>
                        <div class="yith-wcbm-badge__wrap">
                           <img>            
                        </div>
                        <!--yith-wcbm-badge__wrap-->
                     </div>
                     <!--yith-wcbm-badge-->
                  </div>
                  <!--container-image-and-badge--><img>             
               </a>
            </div>
         </div>
         <div class="post_content">
            <a class="" href="xxx?product=speciality-coffee-taster-pack">
            </a>
            <div class="quick_shop_container">
               <button class="quick_shop">
               <span class="quick_shop_text">Quick Shop &nbsp;</span>
               <span class="quick_shop_price"> 
               | From £31.99      </span>
               </button> 
            </div>
           <form class="variations_form">
            ...
            </form>
         </div>
      </div>
   </li>
   <li class="pif-has-gallery  column-1_3 product type-product">
      <div class="post_item_wrap">
         <div class="post_featured">
            <div class="post_thumb">
               <a class="hover_icon hover_icon_link" href="xxx?product=12-month-coffee-subscription">
               <img>                </a>
            </div>
         </div>
         <div class="post_content">
            <a class="" href="xxx?product=12-month-coffee-subscription">
            </a>
            <div class="quick_shop_container">
               <button class="quick_shop">
               <span class="quick_shop_text">Quick Shop &nbsp;</span>
               <span class="quick_shop_price"> 
               | £125.99      </span>
               </button> 
            </div>
            <form class="variations_form">
            ...
            </form>
         </div>
      </div>
   </li>
  
</ul>`