Почему скрипт jQuery в частичном представлении не работает?

Question

( Я опущу часть кода, в котором я на 100% уверен, чтобы сделать код более компактным ). У меня есть основной вид (основной вид не имеет html -head-body, потому что он включен в Layout) ...

<div class="content-wrapper">
    <div id="user-files-table-wrapper">
        <!-- Partial view for user file management to be rendered there-->
    </div>
</div>

<link rel="stylesheet" href="~/css/user-files-table-style.css"/>

@section Scripts
{
    <script type="text/javascript" src="~/js/user-file-manager.js"></script>
}

.. и частичное представление

<h3>User files ("Delete" and "Download" buttons can be clicked with invalid XML files only)</h3>
<table id="user-devices-table">
    <tr>
        <th>User file</th>
        <th>Assigned email</th>
        <th>Is valid</th>
        <th>Delete button</th>
        <th>Download button</th>
    </tr>
    @foreach (var userFileViewModel in Model)
    {
        @foreach (var file in userFileViewModel.UserFiles)
        {
                if (isValid == false && isXml)
                {
                    <tr class="user-file-row invalid">
                        <td>@file.FileName</td>
                        <td>@userFileViewModel.Email</td>
                        <td>@file.IsValid</td>
                        <td>
                            <a class="btn btn-danger" asp-controller="Admin" asp-action="Delete" asp-route-userFileId="@file.UserFileID" asp-route-fileName="@file.FileName">Delete</a>
                        </td>
                        <td>
                            <input type="button" id="@file.FileName" class="btn btn-primary download-button" value="Download" />
                            <p class="download-result">File has been downloaded successfully</p>
                        </td>
                    </tr>
                }
            }
        }
    }
</table>

... и некоторые JS:

$(document).ready(function () {
    $(document).on("click", ".btn.btn-primary.download-button", function () {
        const fileName = $(this).attr("id");
        const clickedButtonRowIndex = $("input[type='button']").index(this);

        downloadUserFile(fileName, clickedButtonRowIndex);
    });
});

function downloadUserFile(fileName, rowIndex) {
    $.ajax({
        url: "/Admin/Download",
        data: { fileName: fileName },
        success: function (data) {
            processProvidedFile(data, fileName);
            showDownloadResult(rowIndex);
        },
        error: function (error) {
            alert(`An error occured: ${error.responseText}`);
        }
    });
}

function processProvidedFile(data, fileName) {
    fetch(data)
        .then(resp => resp.blob())
        .then(blob => {
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.style.display = "none";
            a.href = url;
            a.download = fileName;
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
        })
        .catch(() => alert("An error occured"));
}

function showDownloadResult(rowIndex) {
    $(".download-result.active").removeClass("active");
    $(".download-result").eq(rowIndex).addClass("active");
}

... и некоторые CSS:

.download-result {
    display: none;
}

    .download-result.active {
        display: block;
    }

В общем, моя задача - загрузить файл и показать, что файл был успешно загружен. Файлы скачиваются нормально, проблем с этим нет. Моя проблема в том, что функция showDownloadResult(rowIndex) работает не так, как ожидалось. Отладчик Chrome ударил его с правильным rowIndex, но ни удалите класс active, ни добавив его. Я проверил функцию в JSFiddle - она ​​работает там, как и ожидалось, но не в моем частичном представлении. Что я делаю не так?