获取输入字段两次，一次隐藏

Question

我正在RoR中构建一个简单的Web应用程序（ruby 2.2.2）。所以我构建了一个用户控制页面，我可以邀请不同的用户。因此，我构建了一个输入字段，并添加了用户＆＃39;按钮。单击添加用户按钮时，输入字段的值将复制到下方（通过javascript）的额外创建的输入字段中。从今天开始，一切正常。现在，每当我打开用户控制页面时，在我想要的输入字段旁边，都是一个隐藏的额外输入字段＆amp;与我想要的输入字段具有相同的ID。我真的不知道我做了什么以及如何摆脱这个领域。

所以这是我的rails代码：

<div class='col-md-12'>
  <%= form_for @project, html: { class: 'form-horizontal project' } do |f| %>
      <% unless @project.persisted? %>
          <%= fields_for :invitations do |invitation|%>
              <%= invitation.text_field :email, { value: '', name:'invitationfield', class: "typeahead form-control", size: 50, placeholder: "max.mustermann@student.hpi.uni-potsdam.de" } %>
          <% end %>
          <input type="button" id='AddOneMoreUser' class='btn btn-default btn-xs' value="Add new User">
          <div id="invitedUser"> </div>
      <% end %>
    </div>

    <%= f.submit nil, class: 'btn btn-primary' %>
    <%= link_to t('.cancel', default: t('helpers.links.cancel')),
            projects_path, class: 'btn btn-default' %>
  <% end %>

</div>

这是我的JS代码：

inviteInitUser = ->
  count = 0
  $('body').on 'click', '#AddOneMoreUser', ->
    console.log 'clicked'
    email = $('#invitations_email').val()
    $('#invitations_email').val('')

    div = document.createElement("div")
    div.id = 'user' + count

    deleteButton = document.createElement("input")
    deleteButton.type = 'button'
    deleteButton.value = 'Remove Invitation'
    deleteButton.id = 'delete' + count
    deleteButton.name = 'deleteInvitationButton' + count

    newInvitation = document.createElement("input")
    newInvitation.value = email
    newInvitation.name = 'invitations[' + count + ']'

    div.appendChild(newInvitation)
    div.appendChild(deleteButton)

    list = document.getElementById("invitedUser")
    list.appendChild(div)
    count += 1

    $(deleteButton).on 'click',  -> deleteInvitation()
    return


deleteInvitation = ->
  deleteButtonCount = $("input[type=button][clicked=true]").prevObject[0].activeElement.id
  deleteButtonCount = deleteButtonCount.split('delete')[1]

  list = document.getElementById("invitedUser")
  elem = document.getElementById("user" + deleteButtonCount)
  list.removeChild(elem)



ready = ->
  if $('#AddOneMoreUser').length
    inviteInitUser()
  return


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

所以也许有人知道我的错误在哪里。这是我的输入字段旁边的图片＆＃39;隐藏＆＃39;之一：