So basically I have this little social networking site which allow comments. I've built a comment section that will slide down once a user clicks "Comment" and it slides down under the users status.

My problem is that right now, the JavaScript only works on ONE post ID, and not the rest obviously seeing you can only use an ID once. But of course if I use classes instead, All the comment sections slide down because now they're all the same class. See below for my HTML and JavaScript.

So if someone has a better method out there, please help :)

$(function () {
    $(".comment-box").slideUp();

    //when "comment" is clicked, slide down the comment box. 
    if ($(".comment-box-btn").click(function () {
        $(".comment-box").slideDown();
    }));
    //when "cancel" is clicked, slide up the comment box.
    if ($(".close-comment-box").click(function () {
        $(".comment-box").slideUp()
    }));

});

And here's the HTML used

//anchor for "Comment" 
<a class="comment-box-btn" href="#"><i class="icon-comment"></i> Comment</a>


//comment box
<div class="row comment-box" style="display:none;">
<div class="col-md-12">
<form accept-charset="UTF-8" action="" method="post"> 
<textarea class="form-control animated" cols="180" id="new-comment" name="comment" placeholder="Comment.." rows="1"></textarea>

<div class="text-right" style="margin-top:20px;">
<a class="btn btn-default close-comment-box" href="#">
<span class="glyphicon glyphicon-remove"></span> Cancel</a>
<button class="btn btn-info" type="submit">Comment</button>
</div>
</form>
</div>
</div>