WordPressで絞り込み可能なテーブルを実装したいがJavaScriptが機能しない。

Question

前提・実現したいこと

WordPress上で、絞り込みが可能なテーブルを作りたいと思っています。

こちらのサイトを参考に、まずは同じ機能を実装してから編集するつもりですが、
JavaScriptが機能していないのか絞り込みが機能しない状態です。

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

コンソールで確認しましたが、特にエラーメッセージは出ていません。
htmlは問題なく動いているので、セレクトボックスは使えますが、選択をしても絞り込みができません。

該当のソースコード

<select id="pref-select" class="form-control">
    <option value="">都道府県で絞り込み</option>
    <option value="北海道">北海道</option>
    <option value="青森県">青森県</option>
    ・・・
</select>
<table class="table table-borderd">
    <thead>
        <tr class="active">
            <td>番号</td>
            <td>都道府県名</td>
            <td>読み</td>
            <td>都道府県庁 所在地</td>
            <td>最大都市</td>
            <td>地方</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>01</td>
            <td>北海道</td>
            <td>ほっかいどう</td>
            <td>札幌市</td>
            <td>札幌市</td>
            <td>北海道</td>
        </tr>
        <tr>
            <td>02</td>
            <td>青森県</td>
            <td>あおもりけん</td>
            <td>青森市</td>
            <td>青森市</td>
            <td>東北</td>
        </tr>
        ・・・
    </tbody>
</table>

<script type="text/javascript">
jQuery(function ($) {
    // セレクトボックスが変更されたら処理をする
    $('#pref-select').change(function () {
    
        // 選択した値を取得
        var select_val = $('#pref-select option:selected').val();
        
        // tbodyのtr数回 処理をする
        $.each($("#pref-table tbody tr"), function (index, element) {
        
            // 選択した値が空欄だったら、全ての行を表示する為の処理
            if (select_val == "") {
                $(element).css("display", "table-row");
                return true; // 次のtrへ
            }
            
            // 1行をテキストとして取り出し、セレクトボックスで選択した値があるかをチェック
            var row_text = $(element).text();
            
            if (row_text.indexOf(select_val) != -1) {
                // 見つかった場合は表示する
                $(element).css("display", "table-row");
            } else {
                // 見つからなかった場合は非表示に
                $(element).css("display", "none");
            }

        });
    });
});
</script>

試したこと

・プラグインの利用（Simple Custom css and JavaScript）

・JavaScript・jQueryの記述方法確認（こちら参考）
→jQuery(function ($) {}で囲まれてるので問題はなさそうに見えました

JavaScriptの知見が浅いため、初歩的な質問になってしまい申し訳ありませんが、ご教示いただけないでしょうか？
よろしくお願いいたします。

Answer 1

最初に以下追加すればよかったようです

<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>