Ajaxを用いた非同期投稿を降順に並び替えたい。＆１ページの表示数を制限したい

前提・実現したいこと

現在Ruby on rails を用いて、SNSアプリを制作中です。
アプリケーション制作のなかで、Twitterのような、つぶやき機能を実装しようとしています。
新しい投稿から上に表示されるように表示させたいです。

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

リロードをすると降順に表示されます。
リロードをしなければ、昇順表示かつ、過去の投稿が１ページに全部羅列されてしまいます。
１ページに全ての投稿が表示されてしまうため、スクロールが大変になってしまいます。

該当のソースコード(index.html.erb)

<div class="container mt-5">
	<div class="row">
		<div class="col-3 sidebar">
			<h4><br>あなたの１日の目標を宣言したり、目標をメモしたりしてみてください。<br>
			書くことで、より実現の可能性が高まると言われています!</h4>
			<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
				目標を宣言する！
			</button>
		　</div>
		<div class="col-9 sidebar recipes">
			<%= render 'recipes', recipes: @recipes %>
		</div>
	</div>
</div>

<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">この1日にやりたいこと</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<%= form_for @recipe, remote: true do |f| %>
			<div class="modal-body">
				<div class="form-body">
					<div class="form-group">
						<%= f.label :title, "タイトル" %>
						<%= f.text_field :title, class:"form-control" %>
					</div>
					<div class="form-group">
						<%= f.label :body, "本文" %>
						<%= f.text_area :body, class:"form-control"%>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
					<%= f.hidden_field :user_id, :value => current_user.id %>
					<%= f.submit "投稿する", class:"btn btn-primary" %>
				</div>
			</div>
			<% end %>
		</div>
	</div>
</div>

該当のソースコード(create.js.erb)

("textarea").val("");
$("input").val("");
$("#exampleModal").modal("hide")
$(".modal-backdrop").remove();
$(".recipes").html("<%= escape_javascript(render 'recipes',recipes: @recipes)%>")

該当のソースコード(_recipes.html.erb)

<% recipes.each do |recipe| %>
<div class="card mb-1">
	<div class="card-body">
		<h4><%= simple_format recipe.body%></h4>
		<p class="card-text"><%=recipe.title%></p>
		<p class="trim-image-to-circle">
			<%= link_to user_path(recipe.user_id) do %>
			<%=attachment_image_tag recipe.user, :profile_image, class:"profile-img-circle", size:"10x10",fallback: "no_image.jpg", size:'60x60' %>
			<%= recipe.user.name %>さん
			<% end %>
		</p>
		<i class="far fa-edit">おたけび時間</i>
		<%= recipe.created_at.strftime('%m月%d日%H:%M:%S')%>
	</div>
</div>
<% end %>

該当のソースコード(recipes_controller.rb)

class RecipesController < ApplicationController


  def index
    @recipes = Recipe.page(params[:page]).per(5).order('updated_at DESC')
    @recipe = Recipe.new
  end

   def create
    Recipe.create(recipe_params)
    @recipes = Recipe.all
  end

  def show
    @recipe = Recipe.find(params[:id])
  end

  def recipe_params
    params.require(:recipe).permit(:title, :body, :user_id)
  end
end