how to compare id by jquery - php

Question

How to set on click button value?
In my html form a set of users each having separate id. The users are auto generated, if new user register means they come into list.
Along with that i kept one button as "Invite". But this button id setting for whole users. If I kept on click button alert, it sets for whole users as alert msg.
EX:
If John as one user and have id as 5,if i click John's invite button means, for all users the alert is coming.
What I need is if John's invite I click means John only has to invited not all users.
How could I compare these user id and button id?
Here is a Code:
<script>
$(document).ready(function(){
$(".InviteTeacher").click(function(){
alert('Invited');
});
});
</script>
<div class="thumb_section bx-def-margin-sec-right">
__thumbnail__
</div>
<div class="button_wrapper">
<input type="button" value="Invite" name="InviteTeacher" class="InviteTeacher" id= "InviteTeacher"/>
</div>
Here thumbnail is a user information.

Answer 1

Store the values in hidden inputs.
<form>
<input type="hidden" name="from_id" value="1">
<input type="hidden" name="to_id" value="5">
<input type="submit" value="Invite">
</form>

Answer 2

At the place of generation buttons
$("#button" + userId).click(function(){
//do this
})

Answer 3

Suppose #invite0, #invite1, #invite2, ... are the html id attributes of the buttons to invite users[0],users[1],users[2],... and doInvite(j) is a function will invite the user at users[j].
You need to bind the current i value to the doInvite function, to get the actual handler.
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
Note that doInvite(i) is wrong, that would invite them now, in the for loop, without pushing a button. And function(){ doInvite(i) } is wrong because i will have changed by the time the event handler is called.
But bind will create a new function for us with the loop value of i filled into the first parameter of the function. That can then be called as the event handler.
for(var i=0; i<users.length; ++i){
$('#invite'+i).click(doInvite.bind(null, i));
}
or this can also be written with a closure
for(var i=0; i<users.length; ++i){
$('#invite'+i).click( (function(j){
return function(){
doInvite(j);
}
})(i) );
}
in which case the loop value of i is stored in a new scope created by the top anonymous function, inside its j parameter. You can think of this nesting of anonoymos functions as returning slightly different event handler functions each time around the loop. The j's all exist in their own scopes, and store the values 0,1,2,3,... as the loop progresses.
For another example about closures and event handler setting in a loop, see Event handlers inside a Javascript loop - need a closure?
For more on what closures are and what they do see How do JavaScript closures work?