Ajax 2 응용문제 질문입니다!

<script>
      
    function template1(data){
      data.forEach((a, i)=>{
          var template =
          `<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>`;
          $('.row').append(template)
      });
    }
    var data = [
      { id : 0, price : 70000, title : 'Blossom Dress' },
      { id : 1, price : 50000, title : 'Springfield Shirt' },
      { id : 2, price : 60000, title : 'Black Monastery' }
      ];
      template1(data);
    let more = document.querySelector('#more')
    let count = 0;
    more.addEventListener('click', ()=>{
      count+=1;
      if(count <= 1){
        $.get('https://codingapple1.github.io/js/more1.json').done(function(data){
        console.log(data);
        template1(data);
        })
      }else if(count <= 2){
        $.get('https://codingapple1.github.io/js/more2.json').done(function(data){
        console.log(data);
        template1(data);
      })
      }else{
        more.disabled = true;
      }
    })
  </script>

안녕하세요 선생님 
응용 문제를 해봤는데
이렇게 했을 때 되긴 하는데 이런 식으로 해도 맞는 건지 모르겠어서요... 
이렇게 해도 될까요...?