Question

A while ago I had asked how to make a collapsible comment box like Stackoverflow

The original question is found here

However since then I came across another problem which I am not entirely sure how to go about solving, I am pretty sure that I go about it the same way as the original question but, not quite sure of the syntax.

Basically what my problem is, is that I added a function to limit the # of characters the user enters into the comment and I show the characters remaining.

However because there can be many comment boxes in the list the script is only being executed for the first one in the list, and I need to to be dynamic.

In otherwords just like the links that open the comment box in my original question, each one has a unique id.

How do I do the same for the script that monitors the character input.

$(function(){
    $('#comment').keyup(function(){
        limitChars('comment', 255, 'charlimitinfo');
    })
});

Update: I did get them to be dynamic by doing something like this

$(function(){

    $('.comment-<%=ViewData.Model.Entry.EntryID %>').keyup(function(){
        limitChars('comment-<%=ViewData.Model.Entry.EntryID %>', 255, 'charlimitinfo');
    })
});

However when you open one and then open another the second one takes control…

Answer 1

To my idea your comment boxes are added dynamically. The problem is that since you have multiples ones that won’t work because an id is unique so it only applies to one, so instead of selecting them by id as you have, you can just set the class as “comment” in the control tags and select them that way. ex:

  $(function(){
   $('.comment').keyup(function(){
    limitChars('comment', 255, 'charlimitinfo');
   })
});

your text tag example:

  <textarea cols="20" rows="10" class="comment"></textarea>

Edit The way that can work is keep your jquery set the way it is for the condition, but each tag have to have a unique name to it, either add something to the class to make it unique, but so the jquery will still know it falls under the selector branch or append a different number to each id tag