Rails Ajaxの部分テンプレート更新がうまくできない

絞り込み検索をした結果をAjaxを使って表示させたいのですが、書き換えがうまくいかず、困っています。

音楽のカテゴリー絞り検索です。

DBから取得した検索結果をcontroller内である編集するために、
Active Recordオブジェクトから、配列の中にハッシュを格納させる形で変換しました。

viewに渡す検索結果

[{:id=>1, :songtitle=>"LIFE", :artist =>"キマグレン", :category =>"jpop"}, {:id=>2, :songtitle=>"Because Of You", :artist =>"Ne-Yo", :category=>"R&B"}]

musics_controller.rb

def datasort
    search_data = Music.includes(:categorynumber).order(created_at: params[:newoldsort])
    recodedata = search_data.pluck(:id, :songtitle, :artist, :category)

    keys = ['id', 'songtitle', 'artist', 'category']
    @songdata = search_data.map { |search_data| Hash[*[:id, search_data.id], *[:songtitle, search_data.songtitle], *[:artist, search_data.artist], *[:category, search_data.category]]}

    # 先ほど言ったある編集とは、新たにhashのキーを追加する処理です。
    @songdata.each do |keys| # 各データにキーを新規追加したいので展開します。
        if keys[:artist] == 'キマグレン'
            keys[:catchphrase] = "今、日本で人気のアーティスト" # キャッチフレーズというキーを新規追加
        else
            keys[:catchphrase] = "良いアーティスト" # キマグレン以外のキャッチフレーズ
        end
    end
end

ちなみに、DBのテーブルは、曲自体のテーブルとカテゴリーテーブルの2つあり、1対多の関係です。
曲テーブルからは1つしか参照できませんが、カテゴリーテーブルからはいくつでも参照できます。

この後はviewに渡し部分テンプレートでAjaxを使ってeach展開させて表示させます。

/view/musics/datasort.js.erb

$('#musicdata').html('<%= j(render partial: 'songs') %>');

/view/musics/_songs.html.erb

<div id="musicdata">
<% @songdata.each do |song| %>
  <%= link_to song_path(song[:id]) do %> <%#= 曲の詳細ページへのリンク生成 %>
    <p>キャッチフレーズ：<%= song[:catchphrase] %></p>
    <p>曲名：<%= song[:songtitle] %></p>
    <p>アーティスト：<%= song[:artist] %></p>
  <% end %>
<% end %>
</div>

ルーティング

get 'musics/datasort'
post 'musics/datasort'

絞り込み検索をした際のコンソール

Rendering musics/datasort.js.erb
Rendered musics/_songs.html.erb (3.3ms)
Rendered musics/datasort.js.erb (28.0ms)
Completed 200 OK in 116ms (Views: 73.9ms | ActiveRecord: 4.5ms)

Chromeのパケットをみるとちゃんとpostは受信されているのですが、書き換えだけがうまくいきません。
どうしたら正常に行われるでしょうか？