Javascript Jquery click函数不适用于所有ID

我已经创建了一个包含数据库中所有产品的页面，这是一个动态页面。列是在循环中创建的。无论用户何时单击产品，我都会获取唯一的产品id，但这仅适用于一个产品，适用于下一个产品，即使单击功能未触发。以下是参考代码

{{album.product_name} 类别：{{album.product_Category}

价格：{{album.product_Price}}

$（文档）.ready（函数（）{ $（'#k'）。单击（函数（）{ var a=$（'#custId'）.val（）； 警报（a） 控制台日志（a） }))

这只适用于第一个产品，即循环中的第一个产品。对于其他产品，单击功能不起作用。请帮助

以下是HTML代码：

<div class="card-body"> 
    <a href="#" id="k">
        <img src="qph.fs.quoracdn.net/…" class="card-img-top" alt="..." height="90px" width="85px" id="k">
    </a> 
    <h5 class="card-title">{{ album.product_name }}</h5>
    <p class="card-text">Category : {{ album.product_category }}</p>
    <p class="card-text">Price : {{ album.product_price }}</p>
    <input type="hidden" id="custId" value={{ album.id }}> 
</div>

{{album.product_name}
类别：{{album.product_Category}

价格：{{album.product_Price}
不能有相同ID的多个元素。考虑将一个公共类名添加到所有的目标元素，比如“代码> Myclass < /Cord>”，然后可以使用
绑定所需的事件。
$('.myClass').click(function(){ 
    //your code here...
});

说明：浏览器假定您只有一个id为
k
的元素（因为按照惯例应该是这样），因此
$（“#k”）
将只针对具有该id的第一个元素。
下面是html代码class=“card img top”alt=“…”height=“90px”width=“85px”id=“k”{{album.product_name}
Category:{{album.product_Category}
Price:{{album.product_Price}
我现在注意到的一件事是，第一个对象的id只会在我单击的地方返回。