Jquery.html () doesn't update the element with X, but then calling .html () on it returns X

Question

Jquery.html () doesn't update the element with X, but then calling .html () on it returns X

I am working on a rails app and am creating a "follow / unfollow" function. When the (un) follow button is clicked, the js file is called to partially fetch. The jQuery.html () function somehow does not update the element on screen and in the Validate Element tool, but calling .html () on this updated element outputs what should be the new html content. I'm not sure where to go next with debugging.

_job_info.html.haml partial:

.job_info
  //..stuff..
  .right{id: "bookmark-job-#{job.id}"}
    = render partial: 'jobs/bookmark_job', locals: { job: job }

_bookmark_job.html.haml Partially:

- bookmarked = current_user.following?(job)
- if bookmarked
  = link_to '', unfollow_job_path(job), class: 'bookmarked-job', data: { remote: true, method: :post }
- else
  = link_to '', follow_job_path(job), class: 'add-bookmark-job', data: { remote: true, method: :post }

JS action _follow.js.erb:

console.log('<%= @job.id %>');   // This fires and outputs the correct ID
$('#bookmark-job-<%= @job.id %>').html('<%= j(render(partial: 'jobs/bookmark_job', locals: { job: @job })) %>');  // **

$('#jobs_companies').html('<%= j(render(partial: 'nav/following_info')) %>');   // This correctly updates a user info section

BEFORE STARTING WORK:

Partial HTML (from validation element)

<div class="right" id="bookmark-job-1">
  <a class="bookmarked-job" data-method="post" data-remote="true" href="/jobs/1/unfollow"></a>
</div>

$ ('# bookmark-job-1'). html () console output for element: (space intact)

"
                              <a class="bookmarked-job" data-method="post" data-remote="true" href="/jobs/1/unfollow"></a>
                            "

AFTER GETTING the unfollow action and .html ():

The second line here should change the HTML of this element. After it is launched, the screen and view of the "Items" in the inspector will not change. BUT using the console to call $ ('# bookmark-job-1') returns updated HTML.

Partial HTML (from Inspect element) => Remains unchanged as above.

$ ('# bookmark-job-1'). html () console output for element after update: (space intact)

"<a class="add-bookmark-job" data-method="post" data-remote="true" href="/jobs/1/follow"></a>
"

This part of the controller is working fine. The action is called, the correct @job is set and passed to the partial. Database updates and even a second .html call in the js action works to update the "follow" counter.

class JobsController < ApplicationController
  before_action :set_job, only: [:show, :edit, :update, :destroy, :follow, :unfollow]

  def index
    @jobs = Job.where("id < ?", 10)

    respond_to do |format|
      format.html
      format.js # for js template
    end
  end
  def follow
    current_user.follow @job
  end
  def unfollow
    current_user.stop_following @job
  end

  private
    def set_job
      @job = Job.find(params[:id])
    end
end