QUESTION: My need is to include a specific datepicker for EACH form when a specific button is clicked. Im not sure whether what im doing below in the jquery portion of the code for the datepicker is correct? Can someone please guide me with this? Thanks

DETAILS: I am currently using a hidden form(hidden using css ===> display: none) for user input which displays on button click within table. I am trying to include a datepicker (using the jquery-ui-rails gem (gemfile)) in the text_field_tag of the form by specifying a class(datepicker) for use in the corresponding Jquery code. I am using Rails, Ruby, Jquery and HTML.

Current JQuery code in my application.js file (displays only the corresponding hidden 'td' element for that corresponding single button) including the datepicker:

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

$(function() {
$('.datepicker').datepicker({ dateFormat: 'yy-mm-dd' });


I also have the following in my application.js :

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

and also the following in my application.css.scss:

*= require_self
*= require_tree .
*= require bootstrap-datepicker
*= require jquery.ui.all

Code for View:

<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 ="file3" type="button" class= "btn btn-default
edit_description" onclick="Window(this)">Edit</button>

<div id = file2 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 refix, @prefix %>
<%= text_field_tag 'data', nil, :class => 'datepicker' %>
<%= submit_tag 'Submit' %> </td> <br />
<% end %>