jQuery BlockUI not firing after several synchronous calls

Question

I'm trying to use the jQuery BlockUI Plugin but I'm running into trouble. Here's what I'm trying to accomplish: ... On the click of a button
1) Initiate the blockUI call:

$.blockUI({ message: '<h1 class="label"> Just a moment...</h1>' });

2) Call a function

function (someArray){
  for(x in someArray){
    //Make an ajax call based on x
  }
}

3) After 2 is complete, initiate the unblockUI call: $.unblockUI;

What I'm noticing is that the ajax calls are firing first, and then the $.blockUI is being run. And then $.unblockUI is never called. To be clear, I'm making multiple ajax calls to the server, depending on the size of someArray.

How would I structure this code? I'm only beginning to learn Jscript, JQuery, ajax and so on. I've looked up callbacks, promises, etc. I'm not sure what I'm doing or what to research anymore...

Thanks!

function trigger() {
  startblock(callAjax);

}

function startblock(callback) {
  $.blockUI({
    message: '<h1 class="label"> Just a moment...</h1>'
  });
  callback(endblock);
}

function callAjax(callback) {
  $("#myParagraph").innerHTML('mimic a series of ajax calls')
  callback();
}

function endblock() {
  $.unblockUI;
}

<script src="http://malsup.github.io/jquery.blockUI.js/"></script>


<button type="button" class="button" id="btnCreate" onclick="trigger()">Create</button>

<p id='myParagraph'>