16 분 상품정렬 기능 만들기 숙제풀이 & 응용문제

안녕하세요 선생님 질문이 있습니다.

sort 함수를 쓰기 위해 어레이 사본을 만들었는데  가격순 정렬, 가나다 정렬이 안되는데 이유를 모르겠습니다.
6만원 이하 버튼을 누르면 상품 두개만 나오는게 아니라 기존 상품 3개 옆에 2개가 같이 나와요 

밑에 코드 첨부할께요 

<div class="card-group container">
<!-- <div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">Card title</h5>
<p class="price">가격 : 70000</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">Card title</h5>
<p class="price">가격 : 70000</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">Card title</h5>
<p class="price">가격 : 70000</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div> -->
</div>
<div class="container my-4">
<button class="btn btn-danger" id="sortPrice">가격순정렬</button>
<button class="btn btn-primary" id="abc">가나다정렬</button>
<button class="btn btn-primary" id="filter">6만원이하</button>
</div>
 
<script>
var products = [
{ id : 0, price : 70000, title : 'Blossom Dress' },
{ id : 1, price : 50000, title : 'Springfield Shirt' },
{ id : 2, price : 60000, title : 'Black Monastery' }
];
var products2 = [...products];

products.forEach(function(a){
var template = `<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">${a.title}</h5>
<p class="price">${'가격 : ' + a.price}</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>`;
$('.card-group').append(template)
})

$('#sortPrice').click(function(){
products2.sort(function(a,b){
return a.price - b.price;
})
상품목록()
});

$('#abc').click(function(){
products2.sort(function(a,b){
if (a.title < b.title == true){
return -1
} else {
return 1
}
})
상품목록();
});

$('#filter').click(function(){
var 새상품 = products.filter(function(a){
return a.price <= 60000
});
새상품.forEach(function(a){
var template = `<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">${a.title}</h5>
<p class="price">${'가격 : ' + a.price}</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>`;
$('.card-group').append(template)
})
});

function 상품목록(){
$('.title').eq(0).html(products[0].title);
$('.price').eq(0).html('가격 : ' + products[0].price);
 
$('.title').eq(1).html(products[1].title);
$('.price').eq(1).html('가격 : ' + products[1].price);
 
$('.title').eq(2).html(products[2].title);
$('.price').eq(2).html('가격 : ' + products[2].price);
}

</script>