Show the div when click on text area

Question

I have below code in my rails app.

<% if @s_discussions %>
  <% if @s_discussions.size >= 1 and !@s_discussions.include?("data") %>
     <% @s_discussions.each do |d| %>
      <div class="panel panel-info answer-inline">
        <%= form_tag(controller: "answer", action: "create", method: "post") do %>
        <%= hidden_field_tag :discussion_id, d["d_id"] %>
             <div class="input-group" style="padding: 5px 0px 2px 0px;">                    
               <textarea class="form-control" id="answerbox-inline" style="font-weight: 300;" placeholder="Type your reply..." name="body"></textarea>
            </div>
                                                                                                  
            <div id="answerfooter-inline" class="hidden text-right mt-20">                   
             <button id="answerbox-cancel" type="button" class="btn btn-default btn-conf">Cancel</button>
             &nbsp;&nbsp;&nbsp;
             <button type="submit" class="btn btn-info btn-conf">Reply</button>
             <div class="clearfix pd0 mg0"></div>
            </div>                        
      <% end %>
     </div>
   <% end %>
  <% end %>
 <% end %>

This is my javascript

$(document).on("focus", '#answerbox-inline', function() {
$( this ).animate({
  height: "200px",
}, 200, function() {
  $("#answerfooter-inline").removeClass("hidden");
});
});

I want to show the class hidden when I click on text area. It's work fine for the first item of the list. But not for the other items. When I click on text area of another item it will expand the class hidden of the first item. Can any one help me to resolve this?

Answer 1

the id of each element should be unique, i think you are using the same id for multiple elements. Use classes instead of ids and and let the closest method of jquery help you