JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

</div>

JavaScript

var total = 5;
var i = 0;

var onIterationDone = function() {
    console.log("Iteration Done");
    alert("Done!");
};

var iterate = function() {
    setTimeout(function() {
        var place = $('#iFrame1').contents().find('#iFrame2').contents().find('body');
        place.append('<ul class="list"></ul>');
        for (i = 0; i < total; i++) {
            place.find('.list').append('<li>' + i + '</li>');
        }
        
        button2.trigger('iterationDone');
    }, 1000);
    //how to find all this done from outside of this function?
}
var iFrame1 = $('<iframe />', {
    id: 'iFrame1'
});
var iFrame2 = $('<iframe />', {
    id: 'iFrame2'
});
var button2 = $('<button />', {
    text: 'Child Button',
    click: iterate
});
var button = $('<button />', {
    text: 'Click Me',
    click: function() {
        $(this).parents('body').append(iFrame2);
        $('#iFrame1').contents().find('#iFrame2').contents().find('body').append(button2);
        button2.on('iterationDone', onIterationDone);
    }
});
setTimeout(function() {
    $('.container').append(iFrame1);
    $('#iFrame1').contents().find('body').append(button);  
}, 1000);