Why are these partials rendering differently?

I’m doing a thing where I’m rendering table rows:

<%= render partial: "choices_table_row", collection: @images, as: :image %>

Then, inside that partial:

<tr id="image_<%= image.id %>">
  <td><%= image.name %></td>
  <td><%= image.file_filename %></td>
  <td><%= image.tag_list %></td>
  <td>
    <%= link_to "#", data: {behavior: "edit-image-button", url: "/artist/images/#{image.id}/form" } do %>
      <i class="bts bt-edit"></i>
    <% end %>
  </td>
  <td>
    <i class="bts bt-plus-circle clickable" data-behavior="create-selection-button">
      <%= form_for([:artist, @gallery, Selection.new], remote: true) do |f| %>
        <%= f.hidden_field :image_id, value: image.id %>
      <% end %>
    </i>
  </td>
</tr>

Then I've got some js running behind the scenes to submit the form inside the icon when said icon is clicked:

class PotentialSelection
  constructor: (item) ->
    @icon = $(item)
    @form = @icon.find('form')
    @setEvents()

  setEvents: =>
    @icon.on "click", @addToCollection

  addToCollection: =>
    console.log "wat"
    @form.submit()

ready = ->
  $("[data-behavior='create-selection-button']").each ->
    new PotentialSelection this
  #$("#current-selections-container").sortable(
    #update: ->
      #$.post $(this).data("order-url"), $(this).sortable('serialize')
  #)

$(document).ready ready
$(document).on 'page:load', ready
$(document).on 'ajax:complete', ready

It all works correctly except for the first one. What renders in the first partial is this:

<i class="bts bt-plus-circle clickable" data-behavior="create-selection-button">
      <input name="utf8" type="hidden" value="✓">
      <input value="4" type="hidden" name="selection[image_id]" id="selection_image_id">
</i>

When all the other ones have the full form inside of them:

<i class="bts bt-plus-circle clickable" data-behavior="create-selection-button">
      <form class="new_selection" id="new_selection" action="/artist/galleries/1/selections" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓">
        <input value="11" type="hidden" name="selection[image_id]" id="selection_image_id">
</form>    </i>

wat

I'm pretty sure an i tag isn't intended to be wrapped around a form. That's likely invalid HTML that the browser strips and replaces.

haha. even the text in here is italicized now after you said tag

lol

Haha such markdown fail.

Even when I put the form elsewhere, it's still not rendering the first one correctly. Also, when I try to click the pagination links at the bottom, I get a weird error. I think I'm not actually opening or closing a form properly somewhere

That was it! I forgot to add the do/end parts to a form tag further up, throwing everything off.

You fixed that too quickly for me to take a screenshot :(