【Laravel】月別でデータを表示させたい

前提・実現したいこと

webページで選択した月のデータを閲覧できるようにする。

※追記
具体的には、テーブル形式で表示させたいのですが、thに項目名、tdにデータを追加する処理をJavaScriptで行い、htmlに追加するという流れで考えております。

試したこと

以下のカレンダーの年と月の部分(9月 2021)のシステムを利用できないかと思いましたが、うまくいきませんでした。
データの月だけを@jsonで引っ張って、それを選択した月だけを表示させることには成功しました。

            <div class="container-calendar">
                <h4 id="monthAndYear"></h4>
                <div class="button-container-calendar">
                    <button id="previous" onclick="previous()">‹</button>
                    <button id="next" onclick="next()">›</button>
                </div>
              
                <div id="test-head">
                    
                </div>
                
                <table class="table-calendar" id="calendar" data-lang="ja" hidden>
                    <thead id="thead-month"></thead>
                    <tbody id="calendar-body"></tbody>
                </table>
                  
                <div class="footer-container-calendar">
                    <label for="month">日付指定：</label>
                    <select id="month" onchange="jump()">
                        <option value=0>1</option>
                        <option value=1>2</option>
                        <option value=2>3</option>
                        <option value=3>4</option>
                        <option value=4>5</option>
                        <option value=5>6</option>
                        <option value=6>7</option>
                        <option value=7>8</option>
                        <option value=8>9</option>
                        <option value=9>10</option>
                        <option value=10>11</option>
                        <option value=11>12</option>
                    </select>月
                    <select id="year" onchange="jump()"></select>年
                </div>
            </div>
    
            <script>
                function generate_year_range(start, end) {
                    var years = "";
                    for (var year = start; year <= end; year++) {
                        years += "<option value='" + year + "'>" + year + "</option>";
                    }
                    return years;
                }
                
                var today = new Date();
                var currentMonth = today.getMonth();
                var currentYear = today.getFullYear();
                var selectYear = document.getElementById("year");
                var selectMonth = document.getElementById("month");
                
                var createYear = generate_year_range(1970, 2200);
                
                document.getElementById("year").innerHTML = createYear;
                
                var calendar = document.getElementById("calendar");
                var lang = calendar.getAttribute('data-lang');
                
                var months = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
                var days = ["日", "月", "火", "水", "木", "金", "土"];
                
                var dayHeader = "<tr>";
                for (day in days) {
                    dayHeader += "<th data-days='" + days[day] + "'>" + days[day] + "</th>";
                }
                dayHeader += "</tr>";
                
                document.getElementById("thead-month").innerHTML = dayHeader;
                
                monthAndYear = document.getElementById("monthAndYear");
                
                showCalendar(currentMonth, currentYear);
                
                function next() {
                    currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
                    currentMonth = (currentMonth + 1) % 12;
                    showCalendar(currentMonth, currentYear);
                }
                
                function previous() {
                    currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;
                    currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
                    showCalendar(currentMonth, currentYear);
                }
                
                function jump() {
                    currentYear = parseInt(selectYear.value);
                    currentMonth = parseInt(selectMonth.value);
                    showCalendar(currentMonth, currentYear);
                }
                
                function showCalendar(month, year) {
                
                    var firstDay = ( new Date( year, month ) ).getDay();
                
                    tbl = document.getElementById("calendar-body");
                
                    tbl.innerHTML = "";
                  
                    monthAndYear.innerHTML = year + "年" + " " + months[month];
                    selectYear.value = year;
                    selectMonth.value = month;
                    
                    var postAtMonthOnly = @json($postAtMonthOnly);
            
                    fMonthsHtml = postAtMonthOnly.filter(monthHtml => monthHtml == months[month]);
                    
                    var s = '';
                    fMonthsHtml.forEach(postAt => { s += `<p>${postAt}</p>`; });
                    
                    document.getElementById("test-head").innerHTML = s;
                }
            </script>