symfony jquery he changes me the last element - php

Question

Hi everyone I come to you because I have a small problem, I create a dynamic comments system in ajax and I would like to edit each comment except that when I do it it changes me the last and not the element clicked
I've missed that things that I think
I have not tried anything yet I do not see how to do it
My code :
js:
$('#edit-comments').hide();
$('#add-comments').on('click', function (e) {
e.preventDefault();
$.ajax({
url: $(this).attr('action'),
type: 'POST',
data: $('#formsComments').serialize(),
dataType: 'json',
success: function (data) {
$('#comments_commentsContent').val('');
$('#content-comments').append(data.content);
},
error: function (data) {
console.log(data);
if(data.status === 500) {
$('#errors-comments').html('<div class="error">Vous n\'avez pas ajouté de commentaires\n</div>')
}
}
});
});
$('.comments-content').on('click', function (e) {
e.preventDefault();
$('#add-comments').hide();
$('#edit-comments').show();
var idEdit = $(this).attr('id');
var idContent = idEdit.split('-');
var res = $('p#comments-content-'+idContent[2]).text();
console.log(idContent);
$('#comments_commentsContent').val(res);
$('#edit-comments').on('click', function (e) {
e.preventDefault();
$.ajax({
url: '/article/commentaires/'+idContent[2]+'/edit/'+idContent[3],
type: 'POST',
data: $('#formsComments').serialize(),
dataType: 'json',
success: function (data) {
console.log(data);
$('#comments_commentsContent').val('');
$('#add-comments').show();
$('#edit-comments').hide();
$('#comments-content-'+idContent[2]).html(data.content.message);
},
error: function (data) {
console.log(data);
}
});
});
});
My view twig :
{% for comment in article.comments %}
<div class="media" id="media">
<div class="media-body">
<div class="media-heading">
<h4>{{ comment.userComments.username }}</h4>
<span class="time">{{ comment.createdAt | date("d/m/Y à H:i") }}</span>
{% if app.user %}
{% if comment.userComments.id == app.user.id %}
<a href="{{ path('front_article_edit_comments', {'id': comment.id, 'user': comment.userComments.id}) }}#comments" class="comments-content" id="edit-comments-{{ comment.id }}-{{ comment.userComments.id }}" >
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
{% endif %}
{% endif %}
{% if is_granted('ROLE_ADMIN') %}
<a href="{{ path('front_article_delete_comments', {'id': comment.id}) }}#comments" onclick="return confirm('Vous voulez vous vraiment supprimer ce commenaitre ?');">
<i style="padding-left: 10px; color: #CBBBA3;" class="fa fa-times" aria-hidden="true"></i>
</a>
{% endif %}
</div>
<p id="comments-content-{{ comment.id }}">{{ comment.commentsContent|nl2br }}</p>
</div>
</div>
{% endfor %}
new comments :
if($request->isXmlHttpRequest() && $form->isValid()) {
$user = $this->getUser();
$comments->setUserComments($user);
$comments->setArticleComments($articles);
$em->persist($comments);
$em->flush();
$html = $this->renderView('articles/comments.html.twig', ['comment' => $comments]);
return $this->json(['content' => $html]);
}
edit comments :
if($request->isXmlHttpRequest() && $form->isValid()) {
$em = $this->getDoctrine()->getManager();
$em->flush();
return $this->json(['content' => [
'message' => $comments->getCommentsContent(),
'user' => $comments->getUserComments()->getId(),
'id-comments' => $comments->getId(),
]]);
}
When I want to edit the first comment or the second it does not work.