CSHTML button with javascript onlick function only works some times?

Question

I have a download button set up on a web page that is iteratively assigned an ID based on the how many questions are posted.

Here is the button:

<input data-bind="attr: { id: $index() }" type="button" value="Download" class="download" />

Here is the the JS function that finds the number assigned and does the onclick:

@Scripts.Render("~/bundles/knockout")

<script type="text/javascript">
var SDNo = 0;
    $(document).ready(function () {
            SystemJS.import('sd/questions').then(function (modules) {
                  //Code here for another section that fills out the questions not relevant apart from assigning SDNo

            });
    
            SystemJS.import('sd/download').then(function (modules2) {
                var attachVM = new modules2.Attachment();
                //$("#download").click(function () {
                $("input[class^='download'], input[class*=' download']").each(function () {
                    $(this).click(function () {
                        var id = $(this).attr('id');
                        let passedValue = id.concat("-" + SDNo);
                        attachVM.download(passedValue);
                    });
                });
            
    
            });

The above function allows me to go off to a typescript file and handle the required API call to GET a file

that code is here:

typescript

export class Attachment {

    async download(ID: Number) {
        window.open(await WebApi.getJSON('SD', 'Download', Number));

    }
}

So yeah it'll work then it'll randomly stop working for no reason that I can find and obviously no errors thrown, via debugging it doesn't even get into the typescript file at all nothing happens. But then sometimes it goes all the way through into the controller doing what it needs to do.