웹프로그래밍 예제문제

웹프로그래밍 홈페이지 만드는 예제중에 막히는게 있어서 질문드립니다.
$('.add').click((e)=>{
    let productsId = e.target.dataset.id;
    //4까지만 반복되어야함
    products.forEach((a,i)=>{
        if(a.id == productsId)
        {
          $('.inner-dragbar').append(`
                <div class="col-md-3 bg-white cardbox">
                  < img src="${a.photo}" class="item">
                  <h4 class="text-dark item">${a.title}</h4>
                  <h4 class="text-dark item">${a.brand}</h4>
                  <p class="text-dark item">${a.price}</p>
                  <input type="number" value="${a.count}" class="item-count w-100 item">
                </div>
          `);
        }
    });
  })

1.담기를 누르면 그림이 추가되는 기능인데 그 그림에대한 버튼을 누르면 그림이생성되지만 4개이상으로 계속 옆으로 생성됩니다 이걸 
해결할 수 있는 방법이 무엇인지 궁금합니다.