웹개발 기능대회 합계 질문

위 사진에서 개별 상품 가격의 합을 구하려고 합니다.

$('.card-img').droppable({
    drop: function(event, ui) {
        var item = $(ui.draggable);
        var index = item.attr('data-index');
        var img = item.find('img');
        var productName = item.find('.product-title').text();
        var brandName = item.find('.product-brand').text();
        var price = item.find('.product-price').text();
       
        var 장바구니상품 = $(`
        <div class="card-deck">
            <div class="card mb-3" style="max-width: 540px;" data-index="${index}">
                <div class="row no-gutters">
                    <div class="col-md-4 overflow-hidden">
                        <img src="${img.attr('src')}" class="card-img h-100 w-auto" alt="${productName}" title="${productName}">
                    </div>
                    <div class="col-md-7">
                        <div class="card-body">
                        <h5 class="card-title product-name">${productName}</h5>
                        <p class="card-text brand-name">${brandName}</p>
                        <p class="card-text"><small class="text-muted price">${price}</small></p>
                        <p class="card-text">
                            <div class="input-group input-group-sm mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="inputGroup-sizing-sm-${index}">수량</span>
                                </div>
                                <input type="number" min="1" value="1" class="form-control number" >
                            </div>
                        </p>
                        <p class="card-text">합계 <span class="sum">${price}</span>원</p>
                        </div>
                    </div>
                    <button type="button" class="col-md-1 btn-delete">X</button>
                </div>
            </div>
        </div>
        `);

        $('.basket-list').append(장바구니상품);

        장바구니상품.find('.btn-delete').on('click', function(){
            장바구니상품.remove()
        })

        $('.number').change(function(){
                var 물건개수 = $('.number').val();

                var 단일물건합계 = 물건개수 * price

                $('.sum').html(단일물건합계)        })

이에 대해 가장 아래에 있는 코드를 작성했는데

품목이 하나일 때는 온전히 작동을 했으나 품목이 두개 일 때 버그가 났습니다.

어떻게 접근해야하는 지 힌트를 얻을 수 있을까요?