Passing variable into event listener

I’m changing my coding style by using event listener instead of “onclick=()” pattern I’ve used for many years, and so far so good. Now I have a problem looking for a way to easily pass some values into the function.

Let say I’m rewriting my webboard. There are “Edit / Delete post” here and there for Moderators and High ranking users. The edit form will be loaded and display in the reply content area by AJAX. Normally, I’d use

[code=html]
<a href=”#” onclick=”getEditReply(1003)”>Edit</a>
<p id=”reply_1003″>Some content here</p>
[/code]

With Jquery, I changed it to

[code=html]
// at the page header
<script>
function getEditReply(id){
// some code to load the reply data and form, and put it inside the <p> of that reply
}
</script>

// the edit link
<a href=”reply/edit/1003″ class=”editReply” id=”editReply1003″>Edit</a>
<p id=”reply_1003″>Some content here</p>
<script>
$(“#editReply1003”).click(function(){getEditReply(1003);});
</script>
[/code]

The current method works well, but I think there might be easier and better way than that…
How can I make the event listener to pass the ID value into the function automatically? I want to put script like this at the header instead but I don’t know what to do with ID,

[code=html]
<script>
$(“a.editReply”).click(function(){
getEditReply(The_ID_of_the_reply);
});
</script>
[/code]

Any suggestion will be appreciated ?.

PS. I’m thinking about putting a hidden input with ID value in each reply block, and let jquery look for it by using .siblings() or .next()…

Also in #JavaScript _↴