Unable to use multiple instances on same element

[Chris98]

For some reason, I'm unable to open multiple instances of the loading object on the same page.... not at the same time. I'm listing lots of files to download and each time a file is downloaded I'm trying to add the overlay to the browser for a second. It works the first time, and closes correctly, but after that it doesn't appear anymore. I've verified the function is still called correctly and executes correctly.. it just doesn't show anything. No errors in the console.

$(document).ready(function()
{
	$(".download-overlay").on("click", function (e)
	{
		/* Add overlay */
        $("body").loading({
            stoppable: true,
            theme: "light",
            overlay: $("#submission-overlay"),
        });

		/* Set timeout */
		setTimeout(function()
		{
			$("body").loading('stop');
		}, 1000);
	});
});

My HTML:

<span class="line-break"><a class="download-overlay" href="{{ base['links']['site'] }}downloads/file/{{ file['id'] }}-{{ file['seo_title'] }}/?do=download&csrfKey={{ base['csrfKey'] }}" rel="nofollow" title="{% trans from "downloads" %}Download File ({{ size }}){% endtrans %}"><img src="{{ base['links']['cdn'] }}images/download_file.png" alt="{% trans from "downloads" %}Download{% endtrans %}"></a></span>

And submission overlay:

<div id="submission-overlay" style="display:none">
    <div class="loading-spinner"></div>
</div>

Using Jquery 2.1.4.....