Javascript 多重fa心形计数递增和递减

我需要在单击时增加fa心脏值的计数，在第二次单击时减少

问题是我在同一页面中有多个fa heart，因此无法在单击的fa heart上递增/递减

下面是我的小提琴

（函数（）{
const heart=document.getElementById（'heart'）；
heart.addEventListener（'click'，function（）{
heart.classList.toggle（'red'）；
});
})();
$（文档）.on（'click'，“.notlike”，函数（）{
var$this=$（this）；
$this.removeClass（'notliked'）；
$this.addClass（'liked'）
$count=$（'.likes count'）；
$count.text（函数（idx，txt）{
返回（+txt==0）？0:（+txt-1）；
heart.classList.toggle（'grey'）；
});
});
$（文档）.on（'click'，.liked'，function（）{
var$this=$（this）；
$this.removeClass（'liked'）；
$this.addClass（'notliked'）；
$count=$（'.likes count'）；
$count.text（函数（idx，txt）{
返回+txt+1；
heart.classList.toggle（'red'）；
});
});
$count.text（函数（idx，txt）{
//将文本转换为数字并递增1
返回+txt+1；
});
#心脏{
颜色：灰色；
字体大小：20px；
}
#红心{
颜色：红色；
}


罗伯特·斯蒂芬

100


詹姆斯·卡姆隆

101


约翰·威克

37


詹姆斯·邦德

22


复仇者

90
您应该删除重复的id
心脏
，或者只删除它，因为您已经有了一个类
心脏
，然后将单击附加到该公共类并切换类
喜欢的/不喜欢的
，您可以将这些类用作CSS中的规则，这样就不需要
红色/灰色
类，例如：


$（document）.on（'click'，.heart'，function（）{
var count=$（this.next（'span'）；
$（this.toggleClass（'notliked'）；
if（$（this）.hasClass（'liked'））{
count.text（Number（count.text（））+1）；
}否则{
count.text（Number（count.text（））-1）；
}
});
.heart.notlike{
颜色：灰色；
字体大小：20px；
}
.心{
颜色：红色；
}

罗伯特·斯蒂芬

100

詹姆斯·卡姆隆

101

约翰·威克

37

詹姆斯·邦德

22

复仇者

90
ID必须是文档的唯一ID。在每个心脏上使用唯一的id。此外，在事件处理程序中，获取对所单击元素的引用，而不是使用全局变量，例如，使用
$（this）
。但是，如果我对动态数据执行此操作，我将循环for loop。。那怎么办呢？