Как изменить функцию jquery для создания множества прогресс баров?

Question

Web Artisan @Ad4ptec

JavaScript

Как изменить функцию jquery для создания множества прогресс баров?

Изначально имеется ajax форма, при клике на сабмит с параметром onclick="getUniqId();" - ниже появляется div блок с уникальным id, в котором запускается прогресс бар и доходит до 100% за 20 секунд. Все работает отлично, но задача состоит в том чтобы при повторном нажатии на сабмит прогресс бар в первом блоке был неизменным.

Сейчас есть две проблемы: первая, когда первый прогресс бар успешно завершился и я создаю второй - прогресс бар на первом блоке снова запускается и идет вместе со вторым.
И вторая проблема, если нажать на сабмит два раза с коротким промежутком времени - проценты в прогресс барах скачут.

Я думаю что проблема в функции loaderInir(uniqId);, т.к в ней неуникальные переменные и они конфликтуют сами с собой. Подскажите пожалуйста как решить данную проблему или хотя-бы дайте нужное направление.

function loaderInit(uniqId) {
	start = new Date();
	maxTime = 20000;
	timeoutVal = Math.floor(maxTime/100);
	stopUpdate = false;
	animateUpdate(uniqId);
	
	function animateUpdate(uniqId) {
		if (stopUpdate) {
			return;
		}
		now = new Date();
		timeDiff = now.getTime() - start.getTime();
		perc = Math.round((timeDiff/maxTime)*100);
		if (perc <= 90) {
			updateProgress(perc, uniqId);
			setTimeout(animateUpdate, timeoutVal, uniqId);
		}
	}
}

function updateProgress(percentage, uniqId) {
	$('#progressbar-' + uniqId + '>.ui-widget-header').css('width', percentage + '%');
	$('#progress_qty-' + uniqId).text(percentage + '%');
}

function getUniqId() {
	uniqId = Math.round(new Date().getTime() + (Math.random() * 100));
	addAccountBlock(uniqId);
}

function addAccountBlock(uniqId) {
	
	$('.articles_container').prepend($('.create_hidden_block').clone().show().removeClass('create_hidden_block').prop('id', uniqId));
	$('#' + uniqId + '>.progressbar_block>.progressbar').prop('id', 'progressbar-' + uniqId);
	$('#' + uniqId + '>.progressbar_block>.progress_qty').prop('id', 'progress_qty-' + uniqId);
	loaderInit(uniqId);
	//дальше вызывается функция Juqery Ajax Form
	//если все ок, прогресс бар останавливается и обновляется до 100%
	stopUpdate = true;
	updateProgress(100, uniqId);
	
	//если ошибки просто останавливается и выводятся ошибки
	stopUpdate = true;
}