I have my code structured in such a way that clicking on an 'Edit' button displays a hidden form (written in embedded ruby) within a 'div' html tag and within that form is a text_field_tag whose id is used to tie to a datepicker using Jquery.

Using my current view code and jquery datepicker code in rails : I can click on an edit button and select a date using the text_field_tag for each form. However, when I try to submit that datepicker value it only gets submitted for the first form (for the first 'td element).

Im guessing im doing something wrong with the Jquery code.Can anyone guide me as to how I can submit the datepicker value for the corresponding form (the closest form within 'td' on button click) as opposed to only submitting for the first form(first 'td' element)

Heres my code:


<table class="table">
<th>Download Link</th>
<% @files.each do |file| %>
<% filename = file.split('/').last %>
<% object = @bucket.objects[file] %>

<td><%= filename %></td>


<div class="file_description"><%= object.metadata['description']%>

<button id ="button1" type="button" class= "btn btn-default
edit_description" onclick="Window(this)">Edit</button>

<div id = 'hidden_form' class="file_description_update" >
<%= form_tag({:action => 'update_file_info'}, multipart: true) do %>
Update File Description: <%= text_area_tag :description %>
<%= hidden_field_tag :s3_path, file %>
<%= hidden_field_tag : prefix, @prefix %>
<%= text_field_tag 'user_input' %>
<%= submit_tag 'Submit' %> </td> <br />
<% end %>

Code for Jquery in application.js file in Rails:

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap
//= require_tree .

//= require jquery.ui.all
//= require jquery.ui.datepicker

$( "button.edit_description" ).on( "click", function( event ) {
$(this).closest('td').find("div.file_description_update" ).show();