I created a js script that will create new divs as it iterates through the DB. I am wondering why one div is created, but no additional divs are created. Is there something wrong with my logic here, if not it's likely my html grid. There are 4 iterations of HERA 2.0 in the DB that the for loop is going through, but only one shows on the frontend.

```js
 function appendData(data) {
            var mainContainer = document.getElementById("myData");
            for (var i = 0; i < data.length; i++) {
                if (data[i].productName === "HERA 2.0") {
                    var div = document.createElement("div");
                    price.innerHTML = data[i].productPrice;
                    productTitle.innerHTML = data[i].productName;
                    images.src = 'https://' + data[i].productImage;
                    //div.innerHTML = 'Name: ' + data[i].productName + ' ' + data[i].productPrice;
                    mainContainer.appendChild(div);
                }
            }
```

This is what the HTML looks like:

```html
<div id="myData">
  <div class="container page-wrapper">
    <div class="page-inner">
      <div class="row">
        <div class="el-wrapper">
          <div class="box-up">
            <img id="images" src="">
            <div class="img-info">
              <div class="info-inner">
                <span id="productTitle"></span>
                <span class="p-company">Viasweat</span>
              </div>
            </div>
          </div>

          <div class="box-down">
            <div class="h-bg">
              <div class="h-bg-inner"></div>
            </div>

            <a class="cart" id="cart" href="" target="_blank">
              <span class="price" id="price"></span>
              <span class="add-to-cart">
              <span class="txt">I want it!</span>
            </span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

Edit - Dhruvi -

I've updated the code, and I get the same item being cloned. I think the append in the loop might be causing this.

```js
 function appendData(data) {
          var mainContainer = document.getElementById("myData");
          for (var i = 0; i < data.length; i++) {
            if (data[i].productName === "HERA 2.0") {
              var div = document.querySelector("#row").cloneNode(true);
              price.innerHTML = data[i].productPrice;
              productTitle.innerHTML = data[i].productName;
              images.src = 'https://' + data[i].productImage;
              cart.href = data[i].productUrl;
              mainContainer.appendChild(div);
              console.log('div appended');
            }
          }
        }
        let data=[];
        appendData(data);
```