ajax 더보기 만들기

document.querySelector('#more').addEventListener('click', function () {
    fetch("https://codingapple1.github.io/js/more1.json")
        .then(res => res.json())
        .then(function (data) {
            for (let i = 0; i < data.length; i++) {
                const more_wrap =
                    `<div class="col-sm-4">
    < img src="https://via.placeholder.com/600" class="w-100">
    <h5>${data[i].title}</h5>
    <p>가격 :${data[i].price} </p>
  </div> `
                document.querySelector('.row').innerHTML += more_wrap;
            }

        })
        .catch(function (error) {
            console.log('실패함');
        })

})

여기까지 만들어 봤는데 data의 object가 3개이며 더보기버튼을 눌렀을 때 상품이 3개 나오는거
까지는 확인했습니다.
근데 이제 문제는 다시 더보기를 누르면 똑같은 data3개의 상품이 만들어 진다는건데
이미 한번나온 data object는 안나오게 하려면 어떻게 해야할까요?