老师，根据课程我自己设计了一个小练习，我想点击当前的按钮就显示当前子模块的一些属性，但现在就是实现不了，eq()方法中的index仿佛不能检索，现在是只能输出第一个子模块的内容，其他三个输出的也都一样，麻烦老师看看语法有什么问题，或者有什么更好的方法么，拜托老师了！

下面是这三个模块的代码：

<div class="col-lg-4 col-xl-4 col-md-4 col-sm-6" id="productContent">

                <!--Single Product Area Start-->

                <div class="single-product-area mb-40">

                  <div class="product-img img-full">

                    <a href="single-product.html">

                      <img class="first-img" src="img/product/product5.jpg" alt="">

                    </a>

                    <span class="sticker">New</span>

                    <div class="product-action">

                      <ul>

                        <li><a href="cart.html" title="Add To Cart"><span class="icon_bag_alt"></span></a></li>

                        <li><a href="#" title="Add to Wish List"><span class="icon_heart_alt "></span></a></li>

                        <li><a href="compare.html" title="Compare this Product"><span class="icon_datareport"></span></a></li>

                      </ul>

                    </div>

                    <ul class="product-quickview">

                      <li><a href="#open-modal" data-toggle="modal" title="Quick View"><span class="icon_search"></span></a></li>

                    </ul>

                  </div>

                  <div class="product-content">

                    <h4><a class="productNam" href="single-product.html">HP Notebook 15-ay011nr</a></h4>

                    <div class="product-price">

                      <span id="nowPrice" class="now-price">$78.80</span>

                      <span class="regular-price">$80.00</span>

                    </div>

                  </div>

                </div>

                <!--Single Product Area End-->

              </div>

              <div class="col-lg-4 col-xl-4 col-md-4 col-sm-6" id="productContent">

                <!--Single Product Area Start-->

                <div class="single-product-area mb-40">

                  <div class="product-img img-full">

                    <a href="single-product.html">

                      <img class="first-img" src="img/product/product9.jpg" alt="">

                    </a>

                    <span class="sticker">New</span>

                    <div class="product-action">

                      <ul>

                        <li><a href="cart.html" title="Add To Cart"><span class="icon_bag_alt"></span></a></li>

                        <li><a href="#" title="Add to Wish List"><span class=" icon_heart_alt "></span></a></li>

                        <li><a href="compare.html" title="Compare this Product"><span class="icon_datareport"></span></a></li>

                      </ul>

                    </div>

                    <ul class="product-quickview">

                      <li><a href="#open-modal" data-toggle="modal" title="Quick View"><span class="icon_search"></span></a></li>

                    </ul>

                  </div>

                  <div class="product-content">

                    <h4><a class="productNam" href="single-product.html">Acer Aspire AIO</a></h4>

                    <div class="product-price">

                      <span id="nowPrice" class="now-price">$86.00</span>

                      <span class="regular-price">$92.00</span>

                    </div>

                  </div>

                </div>

                <!--Single Product Area End-->

              </div>

              <div class="col-lg-4 col-xl-4 col-md-4 col-sm-6" id="productContent">

                <!--Single Product Area Start-->

                <div class="single-product-area mb-40">

                  <div class="product-img img-full">

                    <a href="single-product.html">

                      <img class="first-img" src="img/product/product10.jpg" alt="">

                    </a>

                    <span class="sticker">New</span>

                    <span class="descount-sticker">-10%</span>

                    <div class="product-action">

                      <ul>

                        <li><a href="cart.html" title="Add To Cart"><span class="icon_bag_alt"></span></a></li>

                        <li><a href="#" title="Add to Wish List"><span class=" icon_heart_alt "></span></a></li>

                        <li><a href="compare.html" title="Compare this Product"><span class="icon_datareport"></span></a></li>

                      </ul>

                    </div>

                    <ul class="product-quickview">

                      <li><a href="#open-modal" data-toggle="modal" title="Quick View"><span class="icon_search"></span></a></li>

                    </ul>

                  </div>

                  <div class="product-content">

                    <h4><a class="productNam" href="single-product.html">HP Pavilion 22cwa</a></h4>

                    <div class="product-price">

                      <span id="nowPrice" class="now-price">$110.00</span>

                      <span class="regular-price">$122.00</span>

                    </div>

                  </div>

                </div>

                <!--Single Product Area End-->

              </div>

下面是js代码：

<script type="text/javascript">

      var index=0; 

      var goods=document.getElementsByClassName("icon_heart_alt");

    for(var i=0;i<goods.length;i++){

        goods[i].id=i;

        //必须用onclick，click不行

        goods[i].onclick=function(){

        index=this.id;

        alert(index);

        var value=$('#productContent').find('.icon_heart_alt').eq(index).html();

        alert(value);

        alert($(".icon_heart_alt").eq(index).text());

        alert($('.icon_heart_alt').parents().find('#productContent').html());

        var productNam = $('.productNam').html();

        alert(productNam);

        var nowPrice = $('#nowPrice').html();

        alert(nowPrice);

    }

    }

</script>

现在是可以显示当前数字和第一个模块代码的，但是却不能实现一一对应，老师有什么方法么