KendoUI AutoComplete doesn't work in a partial view

I'm working on a new writing a new ASP.NET MVC app using .NET 6 for an Intranet app. We have a view with several controls in it, which we thought we'd refactor into partial views. We're using Telerik's KendoUI for jQuery control suite. When we refactored the controls into partial views, we left the jQuery code in the view. I don't like that, because if someone ever moves the partial view from one page to another or adds one of the partial views to a different view, without bringing the jQuery code with it, then it's not going to work. So, I thought it would be best to move the jQuery code into the partial view where it can stay paired with the control it references. Only problem is, AutoComplete doesn't work. However, the KendoUI DatePicker works fine.

I've been trying to figure out why this happens. I came across an explanation that it was because jQuery was being loaded twice in _Layout.cshtml. I looked and did find that it was being loaded twice. I removed the second instance of loading jQuery, but it didn't fix the issue with AutoComplete. DatePicker still works fine, though.

Some of my colleagues feel that the jQuery code should be in partial views. I'm doubtful of that, but I thought I'd ask here, should the jQuery code stay in the views? And if it doesn't matter, then why does the KendoUI AutoComplete not work, but DatePicker does work?

Here's a snippet of the partial view code involving the DatePicker and one of the AutoCompletes:

<fieldset>
    <legend>Global</legend>
    <p>Select the global details associated with this entire transfer.</p>
    <div>
        <label asp-for="DateReceived"></label>
        <span>@Html.ValidationMessage("DateReceived")</span>
        <input asp-for="DateReceived" type="date" id="DateReceived" class="k-input k-textbox k-rounded-lg" data-val-required="*" />
    </div>
    <div>
        <label asp-for="OrderedByName"></label>
        <span>@Html.ValidationMessage("OrderedByName")</span>
        <span>@Html.ValidationMessage("OrderedByID")</span>
        <input asp-for="OrderedByName" type="text" id="OrderedByName" class="k-input k-textbox k-rounded-lg uppercase" data-val-required="*" />
        <input asp-for="OrderedByID" type="hidden" id="OrderedByID" class="k-input k-rounded-lg" data-val-required="*" />
    </div>

And here's a snippet of some of the jQuery code related to the 2 controls above:

$(document).ready(function () {
    // DATERECEIVED
    $("#DateReceived").kendoDatePicker();
    // ORDERED BY PERSON AUTOCOMPLETE
    $("#OrderedByName").kendoAutoComplete({
        // SET SEARCH DELAY TO VALUE AFTER USER STOPS TYPING
        delay: 600,
        // BEGIN THE AUTOCOMPLETE PROCESS ONLY WHEN ONE OR MORE CHARACTER ARE ENTERED INTO THE FIELD
        minLength: 1,
        // ENFORCE THE MINIMUM LENGTH TO PREVENT NULL ERRORS
        enforceMinLength: true,
        // DISPLAY THE CLEAR BUTTON
        clearButton: true,
        // SET FILTER METHOD TO CONTAINS INSTEAD OF THE DEFAULT OF BEGINS WITH
        filter: 'contains',
        // SET THE ARRAY KEY WHICH CONTAINS THE NAME AS DEFINED BY THE CONTROLLER METHOD
        dataTextField: 'label',
        // SETUP THE AJAX DATA SOURCE
        dataSource: {
            // ENABLE SERVER SIDE FILTERING
            serverFiltering: true,
            // ENABLE SERVER SIDE PAGINATION OF RESULTS
            serverPaging: true,
            // SET PAGE SIZE TO TEN
            pageSize: 10,
            // TRANSPORT
            transport: {
                // READ
                read: {
                    // SET URL ADDRESS TO THE CONTROLLER METHOD
                    url: '/SiteToSite/AutoCompletePerson',
                    // SET CONTENT TYPE OF THE RESPONSE
                    contentType: 'application/json; charset=utf-8',
                    // SET METHOD
                    type: 'GET',
                    // SET RETURN DATA TYPE
                    dataType: 'json',
                    // DEFINE WHICH DATA WE SEND TO THE CONTROLLER METHOD
                    data: function () {
                        return {
                            match: $("#OrderedByName").val()
                        };
                    }
                }
            }
        },
        // CONFIGURE ON CHANGE EVENT
        change: function () {
            // DELAY EXECUTION SO THAT LAST AUTOCOMPLETE HAS A CHANCE TO RESOLVE
            setTimeout(() => {
                // SET NAME AND ID FIELDS
                var SelectorFieldName = "#OrderedByName";
                var SelectorFieldID = "#OrderedByID";
                // GET THE LATEST AUTOCOMPLETE RESPONSE DATA
                var autocomplete = $(SelectorFieldName).data("kendoAutoComplete");
                // GET THE CURRENTLY SELECTED AUTOCOMPLETE ITEM
                var selected = autocomplete.listView.selectedDataItems();
                // A VALID AUTOCOMPLETE ITEM IS CURRENTLY SELECTED
                if (selected.length > 0) {
                    // NAME FIELD IS CURRENTLY BLANK
                    if ($(SelectorFieldName).val() == '') {
                        // UNSELECT AUTOCOMPLETE ITEM
                        $(SelectorFieldName).data("kendoAutoComplete").value("");
                        // CLEAR THE ID FIELD
                        $(SelectorFieldID).val("0");
                        // NAME FIELD IS NOT BLANK
                    } else {
                        // SET THE ID FIELD TO THE ID OF THE CURRENTLY SELECTED AUTOCOMPLETE ITEM
                        $(SelectorFieldID).val(selected[0].val);
                    }
                    // NO VALID AUTOCOMPLETE ITEM IS CURRENTLY SELECTED
                } else {
                    // CLEAR THE NAME FIELD
                    $(SelectorFieldName).val("");
                    // CLEAR THE ID FIELD
                    $(SelectorFieldID).val("0");
                }
            }, 500);
        }
    });