JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<div id="d" style="width:150px; height:100px;">
	<div id="message" style="height:1.3em; border:1px solid #e0e0e0; text-align:center;"></div>
</div>

<button id="open1">Dialog Sequence 1</button> Simple dialog sequence<br/>
<button id="open2">Dialog Sequence 2</button> Dialog sequence with startIndex/endIndex and custom actions on complete/break<br/>
<button id="open3">Dialog Sequence 3</button> Dialog sequence can be applied to any array<br/>

CSS

#d {
	display: none;
}

JavaScript

Array.prototype.runDialogSequence = function(dialogCallback, startIndex, endIndex){
	startIndex = Math.max(0, startIndex || 0);
	endIndex = Math.min(this.length - 1, endIndex || this.length - 1);
	var sequenceIndex = 0,
		arr = this,
		dfrd = $.Deferred().resolve(startIndex);
	function makeCloseFn(seqData){
		return function(event, ui){
			if(seqData.continue_) { seqData.dfrd.resolve(seqData.arrayIndex+1, seqData); } //continue dialog sequence
			else { seqData.dfrd.reject(seqData.arrayIndex, seqData); } //break dialog sequence
		}
	}
	$.each(this, function(i){
		if(i < startIndex || i > endIndex) { return true; }//continue
		dfrd = dfrd.then(function(arrayIndex){
			var seqData = {
				dfrd: $.Deferred(),
				arrayIndex: arrayIndex,
				sequenceIndex: ++sequenceIndex,
				length: 1 + endIndex - startIndex,
				item: arr[arrayIndex],
				continue_: false
			};
			dialogCallback(seqData).on("dialogclose", makeCloseFn(seqData));
			return seqData.dfrd.promise();
		});
	});
	return dfrd.promise();
}

$(function(){
	var myArray = ["A", "B", "C", "D", "E"];
	var myOtherArray = ["X", "Y", "Z"];

	function openDialog(seqData){
		var item = seqData.item;
		var $d = $("#d");
		$d.dialog({
			title: 'Dialog (' + seqData.sequenceIndex + ' of ' + seqData.length + ')',
			modal: true,
			buttons: {
				"Continue": function(){
					seqData.continue_ = true;
					$(this).dialog("close");
				},
				"Cancel": function(){
					$(this).dialog('close');
				}
			}
		}).find("#message").text(item);
		return $d;
	}
	
	$("#open1").click(function(){
		myArray.runDialogSequence(openDialog);
	});

	$("#open2").click(function(){
		myArray.runDialogSequence(openDialog, 1, 3).then(function(i, seqData){
			alert('All dialogs complete - last item = "' + seqData.item + '"');
		}, function(i, seqData){
			alert('Dialog sequence was broken at item ' + i + ' "' + seqData.item + '"');
		});
	});

	$("#open3").click(function(){
		myOtherArray.runDialogSequence(openDialog);
	});
});