How to run a function after each tween (createjs/tweenjs)?

Question

I want to run a function after each tween animation is complete. I am going trough a for-loop of DOMElements, and for each column in a row in a table, I am doing an tween animation to move that specific text.

After the text is moved, I set alpha:0 to remove it, and want to show another DOMElement in that place. My problem is that when I run my tweenComplete function on each tween, the two for-loops that I am in seems to be done, so I cannot catch the variables $i and $j from the loops.

This is my code:

for(var i = 0; i < tableRows; i++){ //for each row
    for(var j = 0; j < tableColumns; j++){ //for each column in one row
        ...
        var thisDOMElem = $("#animThis:not(.used)").get(0);
        var textDOM = new createjs.DOMElement(thisDOMElem);
        createjs.Tween.get(textDOM, {loop: false})
        .wait(timeCount)
        .to({y: calcPositionY, x: calcPositionX}, 1000, createjs.Ease.getPowIn(1))
        .to({alpha: 0}, 500, createjs.Ease.getPowIn(1))
        .to({alpha: 1, y: 0, x: 0}).call(tweenComplete);

        function tweenComplete(){
            var emptyTextPlace = $("#empty-table").find("tr:nth child("+rowCount+")").find("td:nth-child("+columnCount+")").find("span");
            emptyTextPlace.css("visibility", "visible");
        }
    }
}

After the first tween animation is complete, what I get is that only the last span-element is shown, because the rowCount and columnCount is always the same, last values in loop. It seems like the for-loop continues even if the tween animation is not complete. Is there any way to prevent this from happening, so that the tweenComplete-function runs right after the animation in-code?

Update

Fixed the issue, thanks for the help! Added this function for each outer for-loop. This made the functions inside the loop run exactly as and when they should!

for(var i = 0; i < tableRows; i++) (function(i){