railsで画面一部の非同期更新を行う方法と環境

実現したいこと

コントローラでのsave後、画面更新・遷移なしで、POSTの内容をビューに反映させたい。

前提

登録情報に応じて、おすすめのラーメン店をテーブルから表示するアプリケーションをRailsで作成しています。

ビュー上で、画面の一部をAJAXで更新したいのですが、どのような方法で実装すればいいかわかりません。

画面更新なしでの表示自体は、assetsに置いたjavascriptの関数をonclickで呼び出す方法をとりました。

関数の内容としては、表示させたいパーシャルをfetchして、ターゲットのHTMLの要素を書き換えるものです。

発生している問題・エラーメッセージ

postの内容をビューに反映させるために、フォームのボタンにonclickで関数を指定しました。
しかし、saveが終了する前に関数が呼び出されるためか、内容が反映されません。（2回押すと反映されます。）

該当のソースコード

JavaScript
1window.fetchRecommendation = async function() {
2  const target = document.getElementById('target');
3  const response = await fetch(`profiles/recommend`);
4  const data = await response.text();
5  target.innerHTML = data;
6}

ビュー

html.erb
1<button onclick="fetchRecommendation()">表示</button>
2<div id="target">
3</div>

profiles/recommend

html.erb
1<% @ramens.each do |ramen| %>
2  <%= render 'ramen', ramen: ramen %>
3<% end %>
4
5<%= form_with model: RamenStore.new　do |form| %>
6  <%= form.submit "追加",  onclick:"fetchRecommendation()" %>
7<% end %>

コントローラー

rb
1def show
2  @profile_model = ProfileModel.find(params[:id])
3  session[:id] = params[:id]
4end
5
6def add_ramen_shop
7  RamenStore.new(ramen_store_params).save
8  @ramens = Profile.find(session[:id]).recommend_ramen_shops
9end

試したこと

ビューでの関数呼び出しをsetTimeoutして、saveが終わるのを待ってもらおうとした
→失敗

自前の関数で書き換えようとした理由は、TurboLinksを使ったり、viewファイルのJQueryでエレメントを書き換える方法などを試して、どちらもうまくいかなかったためです。
TurboLinksはうまく機能せず、view内のJQueryやJavaScriptは、textファイルと認識されてしまいました。環境の問題か名前空間の問題かと設定の変更を試みましたが、解決できず、諦めてしまいました。

解決方法や、もっといいやり方、普通どのように実装する等のお知恵があれば、ご教示いただきたいです。
よろしくお願いいたします。