RoR - .js查看更多按鈕（頂部）查看更少按鈕（底部）

我有一篇文章，內容是被.js隱藏的內容。用戶點擊'查看更多'，顯示正文內容，並且按鈕更改爲'查看更少'

此時功能正常工作，但按鈕保持在同一位置。

「View Less」（查看較少）按鈕應該放在內容體下方一次打開的位置。

article.html.erb（內容是隱藏的）

 <% article_id = "article-id-#{article.id}" %> 
      <div class="col-md-12 post-body"> 
       <button class="btn btn-primary article-view-more" type="button" data-toggle="collapse"data-target="#<%= article_id %>" aria-expanded="false" aria-controls="article-expand">View More</button> 
      <div class="collapse" id="<%= article_id %>"> 
       <p><%= article.body.html_safe %></p> 
      </div> 
      </div> 
     <%end%>

的application.js（用於按鈕動作）

$(document).ready(function(){ 
$('.article-view-more').click(function(){ 
     var $this = $(this); 
     $this.toggleClass('article-view-more'); 
     if($this.hasClass('article-view-more')){ 
      $this.text('View More'); 
     } else { 
      $this.text('View Less'); 
     } 
    }); 
});

正如您可以通過以下..按鈕狀態的圖像中看到變化，但位置保持不變