Javascript 根据if条件将事件侦听器添加到不同的按钮

我一直在尝试构建一个简单的产品页面，其中有一个产品。我只想做的是，当我点击某个产品的“添加到购物篮”按钮时，它只会增加该产品编号的总数。我的代码的问题是，只需单击任何Addtobasket按钮，不管发生什么，都会增加所有产品的数量。我的代码有什么问题

$（文档）.ready（函数（）{
var产品=功能（名称、价格、计数器）{
this.name=名称；
这个价格=价格；
this.counter=计数器；
//this.button=按钮；
}
Product.prototype.addToBasket=函数（）{
返回这个.counter.innerHTML++；
}
//产品、添加到篮子按钮和从篮子按钮中移除
var allProducts=document.querySelectorAll（“.product”）；
var productRed=document.querySelector（'.productRed'）；
var productBlue=document.querySelector（“.productBlue”）
var addBtn=document.queryselectoral（'.addtobasket'）；
var rmvBtn=document.querySelectorAll（'.removefrombasket'）
//红色产品
var redProductPrice=$（“#red.price tag”）；
var redProductCounter=document.getElementById（'red-counter'）；
var redProductElement=document.getElementById（'red'）；
var redProduct=新产品（redProductElement，redProductPrice.html（），redProductCounter）；
//蓝色产品
var blueProductPrice=$（“#blue.price tag”）；
var blueProductCounter=document.getElementById（'blue-counter'）；
var blueProductElement=document.getElementById（'blue'）；
var blueProduct=新产品（blueProductElement，blueProductPrice.html（），blueProductCounter）；
var clickBtn=功能（obj）{
对于（var i=0；i
正文{
宽度：1060px；
利润率：10px自动；
字体系列：“Arial”，无衬线；
}
.栏目{
边缘顶部：50px；
宽度：100%；
显示：-webkit flex；
显示：-moz flex；
显示：-ms flex；
显示：-o-flex；
显示器：flex；
证明内容：中心；
}
.productred，
.产品蓝色{
/*位置：绝对位置*/
/*顶部：50px*/
显示：块；
利润率：10px；
边框：0.5px实心；
宽度：30%；
最小高度：300px；
文本对齐：居中；
}
.productred.addtobasket，
.productred.从篮子中取出，
.productblue.addtobasket，
.Product蓝色。从篮子中取出{
位置：相对位置；
最高：105%；
}
.checkoutdiv{
边缘顶部：50px；
}
.productred.price文本，
.productblue.price文本{
位置：固定；
最高：30%；
颜色：白色；
}
.productred.counter，
.蓝色.柜台{
位置：绝对位置；
最高：28%；
左边距：290px；
/*左：38%*/
颜色：黄色；
边框：1px实心；
填充物：5px；
}
#红色的{
背景色：红色；
}
#蓝色的{
背景颜色：蓝色；
}
#绿色的{
背景颜色：绿色；
}

订购页
价格：10
0
加入篮子
价格：15
0
加入篮子
请参阅，了解为什么在循环中运行函数（添加事件处理程序）是个坏主意，以及可以采取哪些措施来缓解。抱歉，我不明白。请你用我举的例子强调一下这个问题好吗？