How to make additional forms with with new objects using Javascript/jQuery?

Question

On initial page load, all of the current user's highlights are gathered and each is put into a form. These forms are later shown the user once he clicks a certain button.

The scenario I'm trying to sort out, though, is that through the course of the user's interactions, new highlights can be created. And these new highlights also need to be 'prepared' within the same series of forms.

At the moment, I'm trying to use a gigantic .append() method, but it's failing silently in the background.

Any pointers? I suspect it may have something to do with improper quotation management within the method call and/or incorrect usage of the "j" escape_javascript Rails method...

Is there a better way of approaching the scenario? I've tried 'refreshing' the div with a call to render the partial. While that does achieve the end result of having "current" data on display, the problem there is the associated *.js file becomes 'disconnected' from the page, ruining the user interactions.

Thank you in advance for any help or insight you can offer!

_partial.html.erb This is what I'm essentially trying to 'add to'

  <% @current_user_highlights.each do |highlight| %>
    <div class="slide">
      <%= form_for(highlight, remote: true) do |f| %>
        <%= f.fields_for :image_tags_attributes do |image_tag_fields| %>
          <%= image_tag_fields.fields_for :tag_content_attributes do |tag_content_attributes_fields| %>
            <%= image_tag highlight.file_url(:speck), data: { src: highlight.file_url(:medium),
                                                              id: highlight.id } %>
            <div class="wrapper">
              <%= tag_content_attributes_fields.text_field :content, class: 'form-control',
                                                                    id: "tag-content-field-#{highlight.id}" %>
                                                                    <%# id: "tag-content-field-#{highlight.parent_image.id}" %1> %>

              <div class="actions display-none">
                <%= button_tag "", type: 'submit',
                                  class: "btn btn-lg btn-default glyphicon glyphicon-ok above-interaction-barrier",
                                  id: "highlight-confirmation-submit-button-#{highlight.id}" %>
                <%= button_tag "", class: "btn btn-lg btn-default glyphicon glyphicon-remove above-interaction-barrier",
                                  id: "highlight-confirmation-remove-button-#{highlight.id}" %>
                <%= button_tag "Skip", class: "btn btn-med btn-default above-interaction-barrier display-none skip-button",
                                        id: "highlight-confirmation-skip-button-#{highlight.id}" %>
              </div>
            </div>
          <% end %>

          <%= image_tag_fields.fields_for :tag_title_attributes do |tag_title_attributes_fields| %>
            <%= tag_title_attributes_fields.hidden_field :title, value: highlight.tag_titles.first.title %>
          <% end %>
        <% end %>
      <% end %>
    </div>
  <% end %>

update.js.erb

$('#highlight-confirmation-wrapper div.slide:last').append(
  "<div= 'slide' <%= j form_for(@image.crops.last, remote: true) do |f| %>
    <%= f.fields_for :image_tags_attributes do |image_tag_fields| %>
      <%= image_tag_fields.fields_for :tag_content_attributes do |tag_content_attributes_fields| %>
        <%= image_tag @image.crops.last.file_url(:speck), data: { src: @image.crops.last.file_url(:medium),
                                                                  id: @image.crops.last.id } %>
        <div class="wrapper">
          <%= tag_content_attributes_fields.text_field :content, class: 'form-control',
                                                                id: "tag-content-field-#{@image.crops.last.id}" %>
                                                                <%# id: "tag-content-field-#{highlight.parent_image.id}" %1> %>

          <div class="actions display-none">
            <%= button_tag "", type: 'submit',
                              class: "btn btn-lg btn-default glyphicon glyphicon-ok above-interaction-barrier",
                              id: "highlight-confirmation-submit-button-#{@image.crops.last.id}" %>
            <%= button_tag "", class: "btn btn-lg btn-default glyphicon glyphicon-remove above-interaction-barrier",
                              id: "highlight-confirmation-remove-button-#{@image.crops.last.id}" %>
            <%= button_tag "Skip", class: "btn btn-med btn-default above-interaction-barrier display-none skip-button",
                                    id: "highlight-confirmation-skip-button-#{@image.crops.last.id}" %>
          </div>
        </div>
      <% end %>

      <%= image_tag_fields.fields_for :tag_title_attributes do |tag_title_attributes_fields| %>
        <%= tag_title_attributes_fields.hidden_field :title, value: @image.crops.last.tag_titles.first.title %>
      <% end %>
    <% end %>
  <% end %>
</div>");

Answer 1

I was able to get this sorted out by changing the approach I was using.

Rather than have the form partial include the call to @current_user_highlights, and thereby proceed to make numerous forms, I instead broke the form itself into a separate partial. This allows me to reuse the form later to 'render' a single instance based off of the highlight that is sent through along with the update.js.erb file.

I also added an additional wrapper around the slide listing, this allowed me to more easily use the .append() jQuery function.

The resulting update.js.erb file looks something like this:

$('#slides-wrapper').append("<div class='slide'> <%= j render 'tasks/highlight_confirmation_slide_form', highlight: @image.crops.last %> </div>");