jQuery function in TWIG layout doesn't work properly - php

Question

I am trying to create simple "admin" page for my blog. For now I want to create some "dynamic" behaviour which will lock/unlock user. Then I want to replace single table row with another, taken from json. I wrote a simple function but unfortunatelly it is not working properly...
When I use constant value for user id (just for tests) it works, but only for ONE row. Other buttons do nothig. Then I tried to send id to my function as a parameter but now it says it doesn't exist in my TWIG (what is true).
I want to make it work, because reloading all page when you only locked one user or did another single action, is not a good idea.
How can I make my function work in a good way?
SCRIPT
$(document).ready(function(){
$(".LockUserButton").click(function(id){
$(this).closest("tr").toggleClass('locked progress-bar-striped');
$.ajax({
type: 'POST',
url: "{{ path('lock_ajax', {'id': id }) }}",
data: { user_id: "{{ user.id }}" },
dataType: 'json',
success: function () {
$(this).closest("tr").toggleClass('locked progress-bar-striped');
}
});
});
});
TWIG
<div class="table-content">
{% for u in users %}
{% if u.locked %}
<tr id="tableRow" class="locked progress-bar-striped">
{% else %}
<tr id="tableRow" class="">
{% endif %}
{% if u.roles[0] == 'ROLE_SUPER_ADMIN' %}
<td id="roles">
<h4><span class="glyphicon glyphicon-star admin-star" data-toggle="tooltip" data-placement="right" title="{{ u.roles[0] }}"></span></h4>
</td>
<td>{{ u.username }}</td>
<td>{{ u.email }}</td>
<td>
<span class="glyphicon glyphicon-lock admin-lock" data-toggle="tooltip" data-placement="right" title="Cannot modyfi this user!"></span>
</td>
<td>
<span class="glyphicon glyphicon-lock admin-lock" data-toggle="tooltip" data-placement="right" title="Cannot modyfi this user!"></span>
</td>
{% else %}
<td id="roles">
<h4><span class="glyphicon glyphicon-star-empty user-star" data-toggle="tooltip" data-placement="right" title="{{ u.roles[0] }}"></span></h4>
</td>
<td>{{ u.username }}</td>
<td>{{ u.email }}</td>
<td>
<div class="btn btn-custom LockUserButton">LOCK USER WITHOUT RELOADING</div>
</td>
<td>
<a href="/profile/admin/delete_user/{{ u.id }}" onclick="return confirm('{{ 'user.deleting'|trans }}')">
<div class="btn btn-custom hvr-grow">
<span class="glyphicon glyphicon-trash"></span>
</div>
</a>
</td>
{% endif %}
</tr>
{% endfor %}
</div>
CONTROLLER ACTION
/**
* #Route("/profile/ajax/{id}", name="lock_ajax")
*/
public function ajaxLock($id, Request $request)
{
$entityManager = $this->getDoctrine()->getManager();
$user = $entityManager->getRepository('AppBundle:User')->find($id);
if($user->isLocked()){
$user->setLocked(false);
}else{
$user->setLocked(true);
}
$entityManager->persist($user);
$entityManager->flush();
$result = array();
$result[0] = $user;
return new JsonResponse($result);
}

Answer 1

Thanks to Artamiel I have finally figure it out! Here's the solition for my case:
1) I have added data-id="{{ u.id }}" attribute to my button. Now i have access to my entity ID.
2) I have modify a little my script:
$(document).ready(function(){
$(".LockUserButton").click(function(){
//get user id from twig layout
var user = $(this).data("id");
//ajax request
$.ajax({
type: 'POST',
url: "/profile/ajax/"+user,
data: { user_id: "user" },
dataType: 'json',
context: this,
success: function () {
//i've wrote some function to toggle html
$(this).toggleText('{{ 'user.unlocked'|trans }}', '{{ 'user.locked'|trans }}');
//find table row and toggle classes when button clicked and request ok
$(this).closest("tr").toggleClass('locked progress-bar-striped');
},
error: function(){
alert("Error!");
}
});
});
});