Can you please help me with the JavaScript calendar? It's not working. First it shows like that: Scheduling Dashboard Resources Contact Index Create New mm/dd/yyyy Generate Calendar

@model IEnumerable<AdventureDB.Models.Training_Program>
@using AdventureDB.Models
@{
// Create an instance of the data context
var dbIEFW = new IEFWResourceDataContext();
var dbIFE = new IFEResourcesDataContext();
var dbREF = new REFDataContext();
var dbAQC = new AQCDataContext();
var dbAQCUSAF = new AQCUSAFDataContext();
var dbIPC = new IPCDataContext();
var dbIFTR = new IFTRDataContext();
var dbREFUSAF = new REFUSAFDataContext();
var dbIPCUSAF = new IPCUSAFResourcesDataContext();

int cntr = 0;
ViewBag.Title = "Index";
}

<h2>Index</h2>
<div id="calendar"></div>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<div class="body" style="background-image: url('/Images/bckgrnd.JPG'); background-size: cover; background-position: center; background-repeat: no-repeat;">
<table class="table">
<tr>
<th colspan="5">
@Html.TextBox("startDate", null, new { id = "startDatePicker", type = "date" })
<button id="generateCalendarButton">Generate Calendar</button>
</th>
</tr>
<tr>
<th>
<strong>Course Type</strong>
</th>
<th>
<strong>Class Size</strong>
</th>
<th>
<strong>Training Program</strong>
</th>
<th>
<strong>Description</strong>
</th>
<th>
<strong>Start Day</strong>
</th>
<th>
<strong>End Day</strong>
</th>
<th>
<strong>Resource Information</strong>
</th>
<th></th>
</tr>

@foreach (var item in Model.OrderByDescending(_ => _.Start_Day))
{
<tr>
<td>@Html.DisplayFor(modelItem => item.Course_Type)</td>
<td>@Html.DisplayFor(modelItem => item.ClassSize)</td>
<td>@Html.DisplayFor(modelItem => item.Training_Prog)</td>
<td>@Html.DisplayFor(modelItem => item.Descr)</td>
<td>@Html.DisplayFor(modelItem => item.Start_Day)</td>
<td>@Html.DisplayFor(modelItem => item.End_Day)</td>
……..
<td>
@Html.ActionLink("Details", "Details", new { id = item.CourseTypeID }) |
@Html.ActionLink("Delete", "Delete", new { id = item.CourseTypeID })
</td>
</tr>
}
</table>
</div>

<style>
th {
color: white;
font-weight: bold;
font-style: normal;
font-family: "Times New Roman", Times, serif;
text-align: center;
}

td {
color: yellow;
font-weight: normal;
font-style: normal;
font-family: "Times New Roman", Times, serif;
text-align: center;
white-space: nowrap;
}

.horizontal-row-IEFW {
display: flex;
flex-direction: row;
color: blue;
font-weight: bold;
font-size: 20px;
font-family: "Times New Roman", Times, serif;
}

.horizontal-row-IFE {
display: flex;
flex-direction: row;
color: gainsboro;
font-weight: bold;
font-size: 20px;
font-family: "Times New Roman", Times, serif;
}

.horizontal-row-REF {
display: flex;
flex-direction: row;
color: aqua;
font-weight: bold;
font-size: 20px;
font-family: "Times New Roman", Times, serif;
}

.horizontal-row-REFUSAF {
display: flex;
flex-direction: row;
color: aquamarine;
font-weight: bold;
font-size: 20px;
font-family: "Times New Roman", Times, serif;
}

.horizontal-row-IFTR {
display: flex;
flex-direction: row;
color: beige;
font-weight: bold;
font-size: 20px;
font-family: "Times New Roman", Times, serif;
}

.horizontal-row-IPC {
display: flex;
flex-direction: row;
color: red;
font-weight: bold;
font-size: 20px;
font-family: "Times New Roman", Times, serif;
}

.horizontal-row-IPCUSAF {
display: flex;
flex-direction: row;
color: ActiveBorder;
font-weight: bold;
font-size: 20px;
font-family: "Times New Roman", Times, serif;
}

.horizontal-row-AQCUSAF {
display: flex;
flex-direction: row;
color: blueviolet ;
font-weight: bold;
font-size: 20px;
font-family: "Times New Roman", Times, serif;
}

.horizontal-row-AQC {
display: flex;
flex-direction: row;
color: pink;
font-weight: bold;
font-size: 20px;
font-family: "Times New Roman", Times, serif;
}

.horizontal-row span {
margin-right: 10px;
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function () {
$("#generateCalendarButton").click(function () {
var startDate = new Date($("#startDatePicker").val());
generateCalendar(startDate);
});

function generateCalendar(startDate) {
var endDate = new Date(startDate);
endDate.setFullYear(startDate.getFullYear() + 4);
endDate.setDate(endDate.getDate() - 1);

var calendarHtml = "<table><tr>";

while (startDate <= endDate) {
if (startDate.getDay() !== 0 && startDate.getDay() !== 6) {
calendarHtml += "<th>" + startDate.toLocaleDateString() + "</th>";
}

startDate.setDate(startDate.getDate() + 1);
}

calendarHtml += "</tr></table>";
$("#calendar").html(calendarHtml);
}
});
</script>