对于具有相同类Javascript的元素独立触发动画

Question

我在收藏页面上有多个产品，每次我独立悬停产品卡时，我都希望触发动画。问题：悬停所有产品卡时，动画会同时触发所有产品卡。我在这里查看了其他类似的问题，但找不到我特定问题的解决方案。

var main = document.querySelectorAll(".main-card");
var anime = document.querySelectorAll(".bottom-card");
        
        if (main.length !== 0){
  for (var i=0; i<main.length; i++) {
(this).main[i].addEventListener("mouseenter", function(){

  TweenMax.to(anime, 0.3, {opacity: 1, height: "143px"});
//   .staggerFrom(".size", 0.5, {y: 10, opacity:0, ease:Elastic.easeOut}, 0.1)
  });

(this).main[i].addEventListener("mouseleave", function(){
  TweenMax.to(anime, 0.3, {opacity: 0, height: '0px'});
  });
    
  };
          
        
        }

<form  action="/cart/add" method="post" id="AddToCartForm">
  <a class="grid-view-item__link grid-view-item__image-container" href="{{ product.url | within: collection }}">
  <div id="card" class="product-card__image-with-placeholder-wrapper" data-image-with-placeholder-wrapper>
    <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
      <div style="padding-top:{% unless product.featured_image == blank %}{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100 }}%{% else %}100%{% endunless %};">
        <div id="id" class="main-card">
          <div class="image-card">
        <img id="{{ img_id }}"
              class="grid-view-item__image lazyload"
              alt="{{ product.featured_image.alt }}"
              data-src="{{ img_url }}"
              data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
              data-aspectratio="{{ product.featured_image.aspect_ratio }}"
              data-sizes="auto"
              data-image>
        
            </a>
         
          
          <a class="grid-view-item__link grid-view-item__image-container" href="{{ product.url | within: collection }}">
          
          <div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>
  
  {% include 'product-price', variant: product.selected_or_first_available_variant %}
          </a>
          
          <div id="bottom" class="bottom-card">
            
            
  
  {% if product.title == "Blue Silk Tuxedo" %}

            
 
    
  <div class="flex">
<select name="id" id="{{ product.handle }}" style="display: none;">

  
{% for variant in product.variants %}
  {% if variant.available == true %}
<option {% unless variant.available %} disabled="disabled" {% endunless %} {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {% if variant.available %}{{ variant.price | money_with_currency }}{% else %}{{ 'products.product.sold_out' | t }}{% endif %}</option> 
  

  
{% else %}
  <option disabled="disabled">{{ variant.title }} - Sold Out</option> 

  {% endif %}
  {% endfor %} 
</select> 
    {% if product.available and product.variants.size > 1 %}
  {% for option in product.options %}
    {% include 'swatch' with option %}
  {% endfor %}
{% endif %}
  </div>
  
  
 <button type="submit" name="add" id="AddToCart" class="btn">
<span id="AddToCartText">Add to cart</span>
  
  
</form>

每个产品都有此html代码。因此，每个产品具有相同的类别。这是在shopify主题中。