使用javascript从twig symfony中获取balise html的数据

Question

我使用带有javascript和jquery的symfony在电子商务项目中工作我喜欢从当前产品的HTML Balise获取数据：

HTML

 {% for  p in products %}
  <a id="#basket-modal" data-url={{ path('ajout_prod_panier', {'id': p.id}) }}" href="#" data-id="{{ p.id }}" data-toggle="modal" data-target="basket-modal" class="basket-modal btn btn-primary">
    <i class="fa fa-shopping-cart"></i>Ajouter au panier</a>
 {% endfor %}

脚本

 <script type="text/javascript" >
    $(document).ready(function(){

    $(".basket-modal").on({ click: function() {
      var op_prod_id = $(".basket-modal").data('id');
      console.log(op_prod_id);
     }
  });
 });
</script>

在我的情况下我有两个产品，但问题是，当我点击第一个或第二个产品的按钮时，产品的ID总是显示，它不是动态的!! 有人可以帮帮我吗？