autoKanaを利用してフリガナを自動入力させる

問題

名前を記入するフォームとそのフリガナを記入するフォームに関して、名前を入力したタイミングで自動的にフリガナ用フォームにフリガナが記入されるようにしたい。

手順

以下の記事を参考にさせていただいた。
https://testtesttest21.sakura.ne.jp/wp/2018/04/25/%E7%AC%AC1%E5%9B%9E%E3%80%8C%E3%83%95%E3%83%AA%E3%82%AC%E3%83%8A%E3%81%AE%E8%87%AA%E5%8B%95%E5%85%A5%E5%8A%9B%E3%80%8Dautokana%E3%80%80jquery%E3%83%BBjavascrip/

①GitHubよりautokanaのコードを引っ張ってくる。アセットパイプライン下にautoKana.jsファイルを作成し、コピペする。
（私の場合/javascripts/shared　内）

②viewファイル作成

hoge.html.slim

= simple_form_for @hoge, url: hoge_path do |f|
  #formタグにidをつける
  = f.input :name, input_html:{id: 'name'}
  = f.input :name_kana, input_html:{id: 'name_kana'}

③autokanaのメソッドを使用する旨を書いたjsファイル作成。
（私の場合/javascripts/pages/samples　内）

hoge.js

$(document).ready(
　function() {
    $.fn.autoKana('#name', '#name_kana', {
      katakana : true  //true：カタカナ、false：ひらがな（デフォルト）
  });
});

すると

できた。
（画面のキャプチャを動画でとる方法わからない）