Jquery variable always having same value

Jquery variable always having same value

I am returning a list of anchors using a loop in TWIG:
{% for entity in entitiesot %}
<a href="javascript:void(0);" class="show_post_anchor" data-post-id="{{
entity.id }}">{{ entity.id }}</a>
{% endfor %}
The final goal is to load some information in a div using AJAX/jquery
onclick on the anchor
$(document).ready(function() {
$('a.show_post_anchor').click(function(e){
var id= $("a.show_post_anchor").attr("data-post-id");
alert(id);
});
e.preventDefault();
return false;
});
});
The problem is that the alert is always returning the same value onclcick
on different anchors, even if the anchors are displayed correctly . I
really don't understand where the problem comes from even after hours of
thinking, your help is appreciated.