[rails]素のJavaScriptで実装したAjaxで、グループへの「参加」ボタンを押しても「退会」に切り替わらない問題を解決したい。

転職用のポートフォリオを作成中です。
グループ機能の「グループへの参加」「グループから退会」ボタンを素のJavaScriptでAjax化しようとしたところ、ボタンを押下しても変化がないという現象に遭遇しました。

お力を貸していただけると幸いです。

起きている問題

グループへの参加」ボタンを押しても、ボタン部分の表示が「グループから退会」へ切り替わりません。

前提

グループへの参加ボタンとと退会ボタンの両方で同じ現象が起きていますが、本件では参加ボタンにのみ言及します。
グループ詳細画面から「グループへの参加」ボタンをクリックすると、データベース上ではグループへの参加が成功する。
ボタン押下後に画面を更新すると、意図した通りボタンの表示が更新される

関連コード

ボタン表示の親玉

src/app/views/groups/_join_leave_button.html.erb

ruby
<div id="join_leave_button">
  <% if @current_group.users.include?(current_user) %>
    <%= render 'groups/leave' %>
  <% else %>
    <%= render 'groups/join' %>
  <% end %>
</div>

参加ボタン

src/app/views/groups/_leave.html.erb

erb
<%= form_with(model: current_user.group_users.build, local: false) do |f| %>
  <%= hidden_field_tag :group_id, params[:id] %>
  <%= f.submit "グループに参加", class: "cursor-pointer bg-indigo-700 hover:bg-indigo-600 active:bg-indigo-500 text-white font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150" %>
<% end %>

退会ボタン

src/app/views/groups/_leave.html.erb

erb
<% binding.pry %>
<%= form_with(model: current_user.group_users.find_by(group_id: params[:id]), html: { method: :delete }, local: false) do |f| %>
  <% binding.pry %>
  <%= f.submit "グループを退会", class: "cursor-pointer bg-white active:bg-indigo-600 text-indigo-600 font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded border-solid border-2 border-indigo-600 sm:mr-2 mb-1 ease-linear transition-all duration-150" %>
<% end %>

「グループへ参加」押下時のJavaScript

src/app/views/group_users/create.js.erb

'use strict'

{
  document.getElementById('join_leave_button').addEventListener('click', () => {
    const join_leave_button = document.getElementById('join_leave_button')
    join_leave_button.innerHTML = "<%= escape_javascript(render('groups/leave')) %>"
  });
}

コントローラー

ruby
class GroupUsersController < ApplicationController
  before_action :logged_in_user

  def create
    @current_group = Group.find(params[:group_id])
    @current_group.join(current_user)
    respond_to do |format|
      format.html { request.referer || root_url }
      format.js
    end
  end
...

end

確認したこと

binding.pry実行結果

参加ボタン押下後、退会ボタンsrc/app/views/groups/_leave.html.erbまで処理が通っている。

bash
From: /var/www/myapp/app/views/groups/_leave.html.erb:4 #<Class:0x00007f7765456da0>#_app_views_groups__leave_html_erb__3503282714866467573_44620:

    1: <% binding.pry %>
    2: <%= form_with(model: current_user.group_users.find_by(group_id: params[:id]), html: { method: :delete }, local: false) do |f| %>
    3:   <% binding.pry %>
 => 4:   <%= f.submit "グループを退会", class: "cursor-pointer bg-white active:bg-indigo-600 text-indigo-600 font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded border-solid border-2 border-indigo-600 sm:mr-2 mb-1 ease-linear transition-all duration-150" %>
    5: <% end %>

development.log

ログを見ても、create.js.erbの後に_leave.html.erbが実行されている。

bash
Started POST "/group_users" for 172.23.0.1 at 2022-06-16 08:46:55 +0900
Processing by GroupUsersController#create as JS
  Parameters: {"authenticity_token"=>"[FILTERED]", "group_id"=>"1", "commit"=>"グループに参加"}
  [1m[36mUser Load (0.8ms)[0m  [1m[34mSELECT `users`.* FROM `users` WHERE `users`.`id` = 51 ORDER BY `users`.`id` ASC LIMIT 1[0m
  ↳ app/controllers/application_controller.rb:19:in `logged_in_user'
  [1m[36mGroup Load (0.8ms)[0m  [1m[34mSELECT `groups`.* FROM `groups` WHERE `groups`.`id` = 1 LIMIT 1[0m
  ↳ app/controllers/group_users_controller.rb:5:in `create'
  [1m[36mTRANSACTION (0.6ms)[0m  [1m[35mBEGIN[0m
  ↳ app/models/group.rb:12:in `join'
  [1m[36mGroupUser Create (1.1ms)[0m  [1m[32mINSERT INTO `group_users` (`group_id`, `user_id`, `created_at`, `updated_at`) VALUES (1, 51, '2022-06-16 08:46:55.677313', '2022-06-16 08:46:55.677313')[0m
  ↳ app/models/group.rb:12:in `join'
  [1m[36mTRANSACTION (4.3ms)[0m  [1m[35mCOMMIT[0m
  ↳ app/models/group.rb:12:in `join'
  Rendering group_users/create.js.erb
  [1m[36mGroupUser Load (1.3ms)[0m  [1m[34mSELECT `group_users`.* FROM `group_users` WHERE `group_users`.`user_id` = 51 AND `group_users`.`group_id` IS NULL LIMIT 1[0m
  ↳ app/views/groups/_leave.html.erb:2
  Rendered groups/_leave.html.erb (Duration: 25505.1ms | Allocations: 50987)
  Rendered group_users/create.js.erb (Duration: 25514.5ms | Allocations: 51359)
Completed 200 OK in 25554ms (Views: 25523.7ms | ActiveRecord: 8.9ms | Allocations: 57614)