我正在使用NodeJS，Handlebars和Bootstrap来构建一个简单的Web应用程序。它应该循环通过一个MongoDB集合的模拟产品，并显示它的字段。
我在“产品卡片”中显示数据（请参阅image）。当循环遍历集合以创建卡片时，它会阅读每个产品。但是，我有一个按钮，可以打开每个卡片上的模态-它应该显示与该产品相关的信息，这不起作用。

问题是所有模态显示的信息仅与MongoDB集合中的 * 第一个索引 * 相关。

下面是我的HTML代码来显示产品：

<div class="products">
  <h1>Featured Products</h1>
  <section class="product-list">
    <div class="product-container">
      {{#each Product}}
        <div class="card">
          <div class="title">{{this.name}}</div>
          <div class="image">
            <img src="https://source.unsplash.com/random/50×50/?fruit" />
          </div>
          <div class="cost">{{this.cost}}</div>
          <div>
            <button class="buy-button">Add to cart</button>
            <button
              class="buy-button"
              data-toggle="modal"
              data-target=".bd-example-modal-sm"
            >More Detail</button>
          </div>
        </div>

        <!-- modal -->
        <div
          class="modal fade bd-example-modal-sm"
          data-toggle="modal"
          aria-hidden="true"
        >
          <div class="modal-dialog modal-md">
            <div class="modal-content">
              <div class="carousel" data-ride="carousel">
                <div class="parentSlider">
                  <div class="parentSlider-cell">
                    <img
                      class="img"
                      src="https://source.unsplash.com/random/50×50/?fruit"
                    />
                  </div>
                  <div class="product-detail-text">
                    <p>Name: {{this.name}}</p>
                    <p>Price: {{this.cost}}</p>
                    <p>Description: {{this.description}}</p>
                  </div>
                </div>
              </div>
              
              <div class="modal-footer">
                <button class="buy-button" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
      {{/each}}
    </div>
  </section>
</div>