【Ajax】新規投稿をmodalを使った非同期処理により完結する方法

問題と現状

現在railsでTwitterクローンアプリを作成中です。
新規投稿をボタンからモーダルウインドウを出し、非同期処理で投稿するようにしたいと考えております。

今はモーダルが表示され、投稿をしてモーダルは閉じますが投稿一覧に表示されないという状況です。
更新をすると追加はされます。ターミナルでもinsertされているのでcreateの処理自体はうまくいっていると思います。

挙動に関して、GIFを貼らせていただきます。
投稿するのあとに追加がされないので更新をしている状況です。

該当コード

PostController
1class PostsController < ApplicationController
2  
3  before_action :authenticate_user!
4
5  def index
6    @users = User.all
7    @post = Post.new
8    @posts = Post.order(created_at: :desc)
9    @following_users = current_user.following_user
10    @follower_users = current_user.follower_user
11  end
12  
13  def create
14    @post = Post.new(post_params)
15    @post.user_id = current_user.id
16    # Post.create(post_params)
17    respond_to do |format|
18      if @post.save
19        @posts = Post.all
20        format.html { redirect_to @posts, notice: 'User was successfully created.' }
21        format.json { render :index, status: :ok, location: @post }
22        format.js
23      else
24        format.html { render :index }
25        format.js { @status = "fail" }
26      end
27    end
28  end
29  
30  private
31  
32  def post_params
33    params.require(:post).permit(:body, :image, :user_id)
34  end
35end
36

createjserb
1$("text_area").val("");
2$("input").val("");
3$("#exampleModal").modal("hide");
4$(".newposts").prepend("<%= escape_javascript(render 'index', posts: @posts) %>");

indexhtmlerb
1<div class="projects-section ">
2                <div class="projects-section-header ">
3                    <p>Tweets</p>
4                    <p class="time "><%= Date.today %></p>
5                </div>
6                <div class="projects-section-line">
7                    <div class="projects-status ">
8                        <div class="item-status ">
9                            <span class="status-number "><%= @posts.count %></span>
10                            <span class="status-type ">Total Posts</span>
11                        </div>
12                        <div class="item-status ">
13                            <span class="status-number "><%= @users.count %></span>
14                            <span class="status-type ">Upcoming</span>
15                        </div>
16                    </div>
17                    <div class="view-actions">
18                        <!--<div class="newposts">-->ここのコメントアウトを外すと投稿後に固まります。
19                            <%= render "posts/newpost", posts: @posts %>
20                        <!--</div>-->
21                        <button class="view-btn list-view " title="List View ">
22                          <svg xmlns="http://www.w3.org/2000/svg " width="24 " height="24 " viewBox="0 0 24 24 " fill="none " stroke="currentColor " stroke-width="2 " stroke-linecap="round " stroke-linejoin="round " class="feather feather-list ">
23                            <line x1="8 " y1="6 " x2="21 " y2="6 " />
24                            <line x1="8 " y1="12 " x2="21 " y2="12 " />
25                            <line x1="8 " y1="18 " x2="21 " y2="18 " />
26                            <line x1="3 " y1="6 " x2="3.01 " y2="6 " />
27                            <line x1="3 " y1="12 " x2="3.01 " y2="12 " />
28                            <line x1="3 " y1="18 " x2="3.01 " y2="18 " />
29                        　</svg>
30                        </button>
31                        <button class="view-btn grid-view active " title="Grid View ">
32                          <svg xmlns="http://www.w3.org/2000/svg " width="20 " height="20 " viewBox="0 0 24 24 " fill="none " stroke="currentColor " stroke-width="2 " stroke-linecap="round " stroke-linejoin="round " class="feather feather-grid ">
33                            <rect x="3 " y="3 " width="7 " height="7 " />
34                            <rect x="14 " y="3 " width="7 " height="7 " />
35                            <rect x="14 " y="14 " width="7 " height="7 " />
36                            <rect x="3 " y="14 " width="7 " height="7 " />
37                        　</svg>
38                        </button>
39                    </div>
40                </div>
41                <%= render partial: 'posts/index', locals: { posts: @posts } %> //ここでeach文
42            </div>

//_newpost.html.erb
<div class="container">
    <div class="row">
        <button type="button" class="btn btn-primary w-10" data-toggle="modal" data-target="#exampleModal">
          New Post
        </button>
        
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">新規投稿</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <%= form_for @post, remote: true do |f| %>
                  <div class="modal-body">
                    <%= render 'layouts/error_messages', model: @post %>
                    <div class="post">
                      <%= f.text_area :body, size: "40x5", :placeholder => 'いまどんな気持ち？' %>
                      <div class="image_wrapper">
                        <div class="item_image_btn">
                          <%= f.attachment_field :image, id: "file" %>
                        </div>
                        <div id="img_field" onClick="$('#file').click()" >
                          <p class="image-select">画像選択</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <%= f.submit "投稿する", class: "btn btn-primary" %>
                  </div>
              <% end %>
            </div>
          </div>
        </div>
    </div>
</div>

//_index.html.erb
<div class="project-boxes jsGridView">
    <% @posts.each do |post| %>
        <div class="project-box-wrapper">
            <div class="project-box">
                <div class="project-box-header">
                    <div class="project-box-header-introduction">
                        <%= link_to attachment_image_tag(post.user, :profile_image, format: 'jpeg', size: "50x50", fallback: "no_image.jpg", size:'100x100'), user_path(post.user.id) %>
                        <%= link_to_if post.user, post.user.name, user_path(post.user.id) %>
                    </div>
                </div>
                <div class="box-progress-wrapper">
                    <%= link_to(post_path(post), class: "no-underline") do %>
                        <p class="box-content-header ">
                            <span><%=safe_join(post.body.split("\n"),tag(:br))%></span>
                        </p>
                    <% end %>
                    <%= attachment_image_tag post, :image, format: 'jpeg', size: "150x150" %>
                </div>
                <div class="project-box-footer ">
                    <div id="likes_buttons_<%= post.id %>">
                        <%= render partial: 'posts/post', locals: {post: post} %>
                    </div>
                    <div class="days-left " style="color: #ff942e; ">
                        <%= l post.created_at, format: :default %>
                    </div>
                </div>
            </div>
        </div>
    <% end %>
</div>

最後に

create.js.erbファイルでの最後に記述が間違っているとは思うのですが、解決できていない状況です。
gifでの挙動では$(".newposts").prepend("<%= escape_javascript(render 'index', posts: @posts) %>");の部分は反映されていません。
.htmlなども試したのですが、正常に閉じることができませんでした。
render 'newpost'で新規投稿部分を部分テンプレート化して、
render 'index'で各投稿をeach文でとってきています。
.htmlや.prependで変更したビューファイル部分を差し替える記述だと認識しているのですが、セレクタが正しくないのでしょうか。

ご回答よろしくお願いいたします。