Ajax 2 : 상품 더보기 버튼 만들기

안녕하세요. 사과쌤.
궁금한게 있어서 게시판에 올립니다.


---------------------------------js. 1번--------------------------------------------------------

var products = [
    { id : 0, price : 70000, title : 'Blossom Dress' },
    { id : 1, price : 50000, title : 'Springfield Shirt' },
    { id : 2, price : 60000, title : 'Black Monastery' }
  ];

document.querySelector('.row').innerHTML = '';

products.forEach((a, i) => {
    console.log(a);
    document.querySelector('.row').insertAdjacentHTML('beforeend', `<div class="col-sm-4">
    < img src="https://via.placeholder.com/600" class="w-100">
    <strong><h5>${products[i].title}</h5></strong>
<strong>    <p>${products[i].price}</p></strong>
    </div>`);
});

---------------------------------js. 2번--------------------------------------------------------

var products = [
    { id : 0, price : 70000, title : 'Blossom Dress' },
    { id : 1, price : 50000, title : 'Springfield Shirt' },
    { id : 2, price : 60000, title : 'Black Monastery' }
  ];
document.querySelector('.row').innerHTML = '';

products.forEach((a, i) => {
    console.log(a);
    document.querySelector('.row').insertAdjacentHTML('beforeend', `<div class="col-sm-4">
    < img src="https://via.placeholder.com/600" class="w-100">
    <strong><h5>${a[i].title}</h5></strong>
<strong>    <p>${a[i].price}</p></strong>
    </div>`);
});
--------------------------------------------------------------------------------------------------------

1번에 강조된 부분처럼 하면 잘 되는데, 2번에 강조된 코드로 하면 뜨지 않아 왜 안되는지 궁금합니다.