Adding a datepicker to a nested form

_form.html.erb

<%= form_for(@load) do |f| %>
  <%= f.error_messages %>
    
  <%= f.fields_for :destinations do |builder| %>
    <%= render "destination_fields", :f => builder %>
  <% end %>
  <p><%= link_to_add_fields " Add Destination", f, :destinations %></p>
<% end %> 

_destination_fields.html.erb
============================
<fieldset>
  <%= f.text_field :arrival_date, :placeholder => "From:", :class => "datepicker" %>
</fieldset>

ajax_fields.js.coffee

jQuery ->
    $('form').on 'click', '.remove_fields', (event) ->
        $(this).prev('input[type=hidden]').val('1')
        $(this).closest('fieldset').hide()
        event.preventDefault()
    
    $('form').on 'click', '.add_fields', (event) ->
        time = new Date().getTime()
        regexp = new RegExp($(this).data('id'), 'g')
        $(this).before($(this).data('fields').replace(regexp, time))
        event.preventDefault()

datepicker.js

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

$(function() {
	$('.add_fields').on('click', function(){
	  $(this).datepicker({ dateFormat: 'yy-mm-dd', autoSize:true });
	});
});

link_to_add_fields.rb

def link_to_add_fields(name, f, association)
    new_object = f.object.send(association).klass.new
    id = new_object.object_id
    fields = f.fields_for(association, new_object, child_index: id) do |builder|
      render(association.to_s.singularize + "_fields", f: builder)
    end
    link_to(name, '#', class: "add_fields btn btn-primary icon-plus", data: { id: id, fields: fields.gsub("\n",""), :class => "datpicker" })
  end

my problem

I am trying to add a calendar date picker to a nested form and my code works for the fields I have generated, but when I go to add another field to the DOM, the "datepicker" class is not added to the new field. I have a feeling that I just need to add a correct callback function in the datepicker js file, however I am unsure of how that would look.