Rails 4 Two Forms, Separate Models On One Page - ruby-on-rails

Question

I have two models for communication, Post and Reply. For some reason I can't figure out, the #reply form is unresponsive. Submit does not work, and the file upload field does not work, but only on the #reply form, the #prosect and #post forms work perfectly.
<h1><strong><%= #group.name %></strong></h1>
<p><em><%= #group.description %></em><p>
<p>Operated by: <% #owner = User.find(#group.owner_id) %><%= #owner.name %></p>
<% if current_user.group_id == nil %>
<%= form_for(#prospect) do |f| %>
<%= f.hidden_field :group_id, value: #group.id %>
<%= f.submit "Join Group", class: "btn btn-primary" %>
<% end %>
<% end %>
<% if current_user.group_id == #group.id %>
<%= form_for(#post) do |f| %>
<%= f.hidden_field :group_id, value: #group.id %>
<%= f.hidden_field :user_id, value: current_user.id %>
<div class="form-group col-xs-12">
<div class="row">
<div class="col-xs-11">
<%= f.text_area :content, class: 'form-control', placeholder: "What ails you?" %>
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-success" onclick="addpic(0);">Add a pic</button>
</div>
</div>
</div>
<div class="form-group hidden col-xs-12" id="picture0">
<%= f.file_field :image, class: 'form-control' %>
</div>
<div class="form-group col-xs-12 actions">
<%= f.submit %>
</div>
<% end %>
<% #group.posts.each do |p| %>
<div class="post">
<div class="post-meta">
<%= p.user.name %> <em><%= p.created_at.strftime('%a, %b %e, %Y %r') %></em>
</div>
<%= p.content %>
<% if p.image %>
<img src="data:image/png;base64,<%= p.image %>" class="img-responsive"/>
<% end %>
<% p.replies.each do |r| %>
<%= r.user.name %><br/><%= r.content %>
<% if r.image %>
<img src="data:image/png;base64,<%= r.image %>" class="img-responsive"/>
<% end %>
<% end %>
<a class="reply">Reply</a>
<div class="reply hidden">
<%= form_for(#reply) do |ff| %>
<%= ff.hidden_field :post_id, value: p.id %>
<%= ff.hidden_field :user_id, value: current_user.id %>
<div class="form-group col-xs-12">
<div class="row">
<div class="col-xs-11">
<%= ff.text_area :content, class: 'form-control', placeholder: "Write a reply..." %>
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-success" onclick="addpic(<%= p.id %>);">Add a pic</button>
</div>
</div>
</div>
<div class="form-group hidden col-xs-12" id="picture<%= p.id %>">
<%= ff.file_field :image, class: 'form-control' %>
</div>
<div class="form-group col-xs-12 actions">
<%= ff.submit %>
</div>
<% end %>
</div>
</div>
<% end %>
<% end %>
<script>
var addpic = function(id) {
var el = '#picture' + id;
$(el).removeClass('hidden');
}
$('.reply').on('click', function(e){
e.preventDefault();
$(this).next().removeClass('hidden');
});
</script>

Answer 1

Figured out the issue, JS was preventing the default for all clicks inside a .reply div. Had reply used in the wrapper for the reply form, so it was preventing the default. Got it working now by changing the class of the reply link to 'addreply' and the js listener to 'addreply' as well.