Question

I am trying to create a comment form for posts on my website. I would like to make a link that when clicked displays a comment form. In turn, there will be multiple posts per page so each link will be unique. I want to use unobtrusive javascript to accomplish this, but I am confused on how to use unique ids with JQuery.

For example:

<a href="#" id="comment_1234">Comment</a>

<div id="comment_form_1234">
    form goes here
</div>

$("#comment_?").click(function(){
    $("#comment_form_?").show();
});

Appreciate any help.

Thanks you,

Brian

Answer 1

I would structure the HTML like this:

<a href="#" class="comment" data-id="1234">Comment</a>

<div class="comment_form" data-id="1234">
    form goes here
</div>

With this script:

$(".comment").on('click', function(){
    $('.comment_form[data-id="' + $(this).attr('data-id') + '"]').show();
});