Ajax 2 : 상품 더보기 버튼 만들기(응용문제)

var template = data => {
      data.forEach((a,i)=>{
        var 템플릿 =
          `<div class="col-sm-4">
            < img src="https://via.placeholder.com/600" class="w-100">
                <h5>${a.title}</h5>
                <p>가격 : ${a.price}</p>
            </div>`;
          $('.row').append(템플릿);
      });
    }

    let count = 0;
      products.forEach((a, i)=>{
        var 템플릿 =
        `<div class="col-sm-4">
          < img src="https://via.placeholder.com/600" class="w-100">
          <h5>${products[i].title}</h5>
          <p>가격 : ${products[i].price}</p>
        </div>`;
        $('.row').append(템플릿)
      });
      //한개씩만나와야하는데 둘다 같이나옴
      $('#more').on('click',() => {
        if(count == 0) {
          $.get('https://codingapple1.github.io/js/more1.json').done(data => {
            template(data);
          });
          count++
      }
      })
      
      $('#more').on('click',() => {
        if(count == 1){
          $.get('https://codingapple1.github.io/js/more2.json').done(data => {
            template(data);
          });
        }
        count++;
      })

더보기를 눌렀을시 한번에 밑에꺼까지 생깁니다 첫번째 더보기 버튼을 눌렀을때 e.preventDefaultf를 써봤는데도
한번에 모든게 보였습니다. 해결할수잇는방법이 있을까요??