Laravel にJqueryで作成したタブのロジックを画面に反映させたいです。

前提・実現したいこと

Laravel(ver8.42.1)で生徒管理システムを作っています。
カウンセリングボタンを押下したらcounseling.blade.phpと、counseling_tabs.blade.phpの内容を表示されるようにしたいです。　現在、counseling.blade.phpは表示されています。

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

counselings.blade.phpは表示されるが、counseling_tabs.blade.phpのタブ表示がうまくいってない

エラーメッセージ

VM17:4068 Uncaught TypeError: $(...).button is not a function
    at HTMLDocument.<anonymous> (<anonymous>:10931:30)
    at mightThrow (<anonymous>:3775:29)
    at process (<anonymous>:3843:12)

該当のソースコード

jquery
1**counseling_tabs.js**
2
3$(function() {
4    $("a, button", ".toolbar").button();
5
6    $("#tabs").tabs();
7    var tabCount = 1;
8    var tabNavTmpl2 = "<li id='add{0}'><a href=\{{ url('counseling_tabs')}}\">提案 {2}</a></li>";
9
10    $("#load").on('click',function () {
11        ++tabCount;
12        //tabNavTmpl2の{0}をtabCountに置換する
13        var tabNav = tabNavTmpl2.replace("{0}", tabCount).replace("{1}", tabCount).replace("{2}", tabCount);
14        $("#tabs").find("#loadA").before(tabNav);
15
16        $("#tabs").tabs("refresh");
17       return false;
18    });
19     
20});
21

jquery
1**counseling.js**
2
3$(function(){
4    $('#counseling').hide();
5    $(".counseling").on('click',function(){
6        $('#counseling').toggle();
7        $("#counseling").load("/counselings");
8       })  
9})
10

**counselings.blade.php**


    <section class="counseling-section">
        <div class="counseling-wrap">
            <table class="counseling-table">
                <tr>
                    <td>リテラシーレベル</td>
                    <td><input type="text" style="width: 43rem;"></td>
                </tr>
                <tr>
                    <td>カウンセリング結果</td>
                    <td><textarea name="" id="" cols="100" rows="10"></textarea></td>
                </tr>
                <tr>
                    <td>意思決定予定日</td>
                    <td><input type="date"></td>
                </tr>
            </table>
            <div id="tabs">
                <ul>
                    <li><a href="{{ url('counseling_tabs') }}">提案</a></li>
                    <li id="loadA">
                        <button id="load">追加</button>
                    </li>
                </ul>
            </div>
            <div class="button-list">
                <ul class="button-list-item">
                    <li><button class="save">保存</button></li>
                    <li><button class="print" type="button">印刷</button></li>
                </ul>
            </div>
        </div>


    </section>
    <script src="{{ mix('js/counseling_tab.js') }}"></script>

php
1**counselings_tabs.blade.php**
2
3
4    <section class="suggestion-section">
5        <table class="suggestion-table">
6            <tr>
7                <td>提案タイトル</td>
8                <td><input type="text"></td>
9            </tr>
10            <tr>
11                <td>目標</td>
12                <td><input type="text"></td>
13            </tr>
14            <tr>
15                <td>提案概要</td>
16                <td><input type="text"></td>
17            </tr>
18            <tr>
19                <td>提案時間数</td>
20                <td><input type="text"></td>
21                <td><input type="text" style="width: 5rem;">&emsp;時間</td>
22                <td>×週&emsp;<input type="text" style="width: 3rem;">&emsp;回</td>
23            </tr>
24            <tr>
25                <td>提案受講料</td>
26                <td><input type="text"></td>
27                <td><input type="text" style="width: 5rem;">&emsp;ポイント</td>
28                <td>月謝<input type="checkbox">入学金免除<input type="checkbox"></td>
29                <td><input type="text" style="width: 5rem;">&emsp;%割引適用</td>
30            </tr>
31        </table>
32    </section>
33        <section class="curriculum-section">
34            <div class="curriculum-wrap">
35                <div class="curriculum-wrap__word">カリキュラム</div>
36                <table class="curriculum-table">
37                    <tr>
38                        <th>単元</th>
39                        <th>時間</th>
40                        <th>学習内容</th>
41                    </tr>
42                    <tr>
43                        <td><input type="text"></td>
44                        <td><input type="text" style="width: 5rem;"></td>
45                        <td><input type="text" style="width: 25rem;"></td>
46                    </tr>
47                    <tr>
48                        <td><input type="text"></td>
49                        <td><input type="text" style="width: 5rem;"></td>
50                        <td><input type="text" style="width: 25rem;"></td>
51                    </tr>
52                </table>
53            </div>
54        </section>
55    
56
57

**webpack.mic.js**

const mix = require('laravel-mix');


mix.js('resources/js/app.js', 'public/js')
  .js('resources/js/counseling.js', 'public/js')
  .js('resources/js/counseling_tab.js', 'public/js')
  .js('resources/js/follow.js', 'public/js')
  .js('resources/js/jquery-ui.js', 'public/js')
  .js('resources/js/jquery-ui.min.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css')
    .autoload({ 
        "jquery": ['$', 'window.jQuery'], 
    });

php
1### inquirys.blade.php
2<!DOCTYPE html>
3<html lang="en">
4
5<head>
6    <meta charset="UTF-8">
7    <meta http-equiv="X-UA-Compatible" content="IE=edge">
8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9    <title>Document</title>
10    <link rel="stylesheet" href="{{ asset('css/reset.css') }}">
11    <link rel="stylesheet" href="{{ asset('css/header.css') }}">
12    <link rel="stylesheet" href="{{ asset('css/inquiry.css') }}">
13    <link rel="stylesheet" href="{{ asset('css/counseling.css') }}">
14    <link rel="stylesheet" href="{{ asset('css/counseling_tab.css') }}">
15    <link rel="stylesheet" href="{{ asset('css/follow.css') }}">
16    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
17</head>
18
19<body>
20    <header>
21        @include('layouts.headers')
22    </header>
23    <main>
24        <form action="{{ url('inquirys') }}" method="POST">
25            @csrf
26            <table class="inquirys-table">
27                <tr>
28                    <td>氏名</td>
29                    <td><input type="text" name="student_name"></td>
30                    <td><button class="admission-color">入学</button></td>
31                </tr>
32                <tr>
33                    <td>電話</td>
34                    <td><input type="text" name="student_tell"></td>
35                </tr>
36                <tr>
37                    <td>住所</td>
38                    <td colspan="2"><input type="text" name="student_address" style="width: 25rem;"></td>
39                </tr>
40                <tr>
41                    <td>メール</td>
42                    <td><input type="text" name="student_mail"></td>
43                    <td><button id="gmail" class="button-color">gmail</button></td>
44                </tr>
45                <tr>
46                    <td>職業</td>
47                    <td><input type="text" name="profession"></td>
48                </tr>
49            </table>
50            <div class="button-list">
51                <ul class="button-list-item">
52                    <li><button class="save">保存</button></li>
53                    <li><button class="counseling" type="button" formaction="{{ url('counselings') }}" formmethod="GET">カウンセリング</button></li>
54                    <li><button class="follow" type="button" formaction="{{ url('follows') }}" formmethod="GET">フォロー状況</button></li>
55                </ul>
56            </div>
57        </form>
58        <div id="counseling"></div>
59        <div id="follow"></div>
60
61    </main>
62    <script src="{{ mix('js/app.js') }}"></script>
63    <script src="{{ mix('js/counseling_tab.js') }}"></script>
64    <script src="{{ mix('js/follow.js') }}"></script>
65    <script src="{{ mix('js/counseling.js') }}"></script>
66    <script src="{{ mix('js/jquery-ui.js') }}"></script>
67    <script src="{{ mix('js/jquery-ui.min.js') }}"></script>
68</body>
69
70</html>