웹개발 기능대회 과제 질문드립니다.

//JSON데이터를 저장할 배열 변수
let Ddata = [];
let count = 1;

//JSON데이터를 받아와 카드폼에 데이터를 기입 후 카드폼 정렬
function CardArray(Para){
        for(let i=0; i < Para.length; i++){
           var CardData =
           `<div class="card CardBatch" id="CDrag" style="width: 18rem;" draggable="true" ondragstart="drag(event)">
            < img src="${Para[i].photo}" class="card-img-top">
            <div class="card-body CardBatch">
            <h5 class="card-title">${Para[i].title}</h5>
            <p class="card-text">${Para[i].brand}</h5>
            <p class="card-text">가격 : ${Para[i].price}</p>
            <button type="button" class="btn btn-primary buy">담기</button>
            </div>
          </div>`;
        $('.row').append(CardData);
   
        }
}

//오브젝트형인 JSON데이터를 AJAX로 받아와 오브젝트형 안의 배열 키의 데이터만 추출
$.get('store.json').done(function(data){
        Ddata = data.products;
        CardArray(Ddata);

       //담기 버튼 눌렀을 때 상품카드가 장바구니에 복사되어 수량 칸도 보이게
        for(let i = 0; i < Ddata.length; i++){
                $('.buy').eq(i).on('click', function(){
                        var StorageData =
                        `<div class="card CardBatch" id="CDrag" style="width: 18rem;" draggable="true" ondragstart="drag(event)">
                        < img src="${Ddata[i].photo}" class="card-img-top">
                        <div class="card-body CardBatch">
                        <h5 class="card-title">${Ddata[i].title}</h5>
                        <p class="card-brand">${Ddata[i].brand}</h5>
                        <p class="card-text">가격 : ${Ddata[i].price}</p>
                        <input type="text" class="form-control">수량 : ${count}</input>
                        </div>
                        </div>`;
                        $('.storage').append(StorageData);
                })
        }
}
드래그 앤 드롭 기능을 구현하다 좋은 방법이 떠오르지 않아 담기 버튼을 눌렀을 때 장바구니에 추가하는 방법을 먼저 구현해보고 있었습니다.

그래서 담기버튼을 눌렀을 때 장바구니에 새로운 카드폼을 생성하는 작업까지는 했는데, 상품명과 브랜드, 가격, 수량은 나오지 않아서 어떻게 해야될 지 고민이 되어 질문드립니다.

개발자 도구로 elements 확인해보니 잘 생성은 된거 같습니다..