javascript - How do I preserve the `this` from a previous JS state and transfer it to another? -

so have view has simple_form, looks this:

<%= simple_form_for([node, comment.new], html: { id: "new_comment_card-#{@card_number}"}, remote: true) |f| %>         <%= f.error_notification %>         <%= f.input_field :message, as: :text, id: "card-input-field-#{@card_number}", class: "input-field", placeholder: "share thoughts", cols: "30", rows: "10" %>         <%= f.button :submit %> <% end %> 

this form appears multiple times on same view, hence dynamic id specified.

when button pressed, js intercepts submit (to ensure submit sends right credentials right form):

  $(".input-submit").click(function(event) {       event.preventdefault();       $(this).closest('form').submit();   }); 

otherwise last rendered form submitted , leads manner of issues.

when submitted, leads commentscontroller#create looks this:

  def create     @node = node.find(params[:node_id])     @comment = current_user.comments.new(comment_params)     @comment.node = @node      respond_to |format|       if @comment.save , @node.save         format.html         format.js       else         format.html         format.js       end     end   end 

that looks , executes - create.js.erb. want create.js.erb 3 things:

1. add newly saved comment top of current div#id=card-comments, perhaps little animation show new comment.
2. push other list of existing comments down make way newly created comment step 1.
3. remove text input field, user can add comment without refreshing, perhaps little jiggle/highlight/animation.

i not sure how achieve - js not strong suit.

i tried doing in create.js.erb, have sorts of weird behavior including duplicating entire content of comments on 1 card comments on card:

$('#card-comments').append("<%= j (render partial: 'nodes/comment', collection: @node.comments) %>"); 

how achieve above?

if user can submit comments on multiple cards on page, should submit parameter controller indicating card comment submitted on , js should replace comments of specific card. jquery selector on #card-comments doesn't match specific card. perhaps place comments in div specific id similar form , replace comments of div:

$('#card-<%= params[:node_id] %>-comments').html("<%= j (render partial: 'nodes/comment', collection: @node.comments) %>");