javascript XHR inside loop black other calls

Question

I am stuck on this problem. the loop hold every other ajax call. Below is how code looks

class SomeClass{
caseFiles()
    {
        const self = this;
        const fileListElms = document.getElementsByClassName( 'summary-file-list' );
        if ( fileListElms ) 
        {
            let html = `<li class="list-inline-item fw-bold">
            DOCUMENTS:
            </li>`;
            var xhr = [], i;
            for ( i = 0; i < fileListElms.length; i++ ) 
            {
                const elm = fileListElms[ i ];
                ( function ( i )
                {
                    xhr[ i ] = new XMLHttpRequest();
                    xhr[ i ].responseType = 'json';
                    xhr[ i ].open( "GET", elm.dataset.url, true );
                    xhr[ i ].setRequestHeader( 'X-Requested-With', 'XMLHttpRequest' );
                    xhr[ i ].onreadystatechange = function ()
                    {
                        if ( xhr[ i ].readyState === 4 && xhr[ i ].status === 200 )
                        {
                            console.log( 'Response from request ' + i );
                            console.log( xhr[ i ].response );
                        }
                    };
                    xhr[ i ].send();
                } )( i );

            }
        }
    }
}

( () =>
{
    const sc = new SomeClass();
    sc.caseFiles();
} )();

While the above code is processing, if i send any other ajax call to server, that request simply waits for all calls in loop to finish. Please advise