ckeditor 4 accessing focusmanager with dynamically created editor insantces

Question

i currently have 1 editor that will always be on the page when it loads, the page has a feature to add multiple editors by clicking a add button.

my code works on the first editor only that is loaded with the page, how can i adapt this to work on all the editors on the page, even if dynamically created after the page has been loaded? (the dynamically created editors)

$(document).ready(function(){
    $.each(CKEDITOR.instances, function(instance){
        var editor = CKEDITOR.instances[instance];
        if (editor) {
            editor.on( 'focus', function( e ) {
                $('.hint').show();
            });
            editor.on( 'blur', function( e ) {
                $('.hint').hide();
            });
        }
    });
});

eidt 1 - fullcode minus html

$(document).ready(function(){
    $('textarea').each(function(i) {
        var editorId = $(this).attr('id');
        if(editorId != 'master'){
            if( $(this).hasClass('main') ){
                ckeditor_simple_toolbar(editorId);
            }
            if( $(this).hasClass('extras') ){
                ckeditor_advanced_toolbar(editorId);
            }
        }
    });

    $.each(CKEDITOR.instances, function(instance){
        var editor = CKEDITOR.instances[instance];
        if (editor) {
            editor.on( 'focus', function( e ) {
                $('.hint').show();
            });
            editor.on( 'blur', function( e ) {
                $('.hint').hide();
            });
        }
    });

    $('.add_extra').live('click',function(){
        ckeditor_advanced_toolbar(this.id);
    });
});


function ckeditor_simple_toolbar(textA_id){
    CKEDITOR.replace(textA_id,{
        tabSpaces           : 4
    });
}

function ckeditor_advanced_toolbar(textA_id){
    CKEDITOR.replace(textA_id,{
        emailProtection     : 'encode',
        tabSpaces           : 4,
        extraPlugins        : 'autogrow',
        height              : 100,
        autoGrow_minHeight  : 100,
        autoGrow_maxHeight  : 400,
        removePlugins       : 'resize',
        toolbarLocation     : 'bottom',
    });
}

edit 2 here is a test setup of what is happening, the focus and blur aren't working on the dynamically added editors

http://elhalawa.net/editor/index.html

Answer 1

just added the on instanceReady code and it worked great

CKEDITOR.replace(textA_id,{
    emailProtection     : 'encode',
    tabSpaces           : 4,
    extraPlugins        : 'autogrow',
    height              : 100,
    autoGrow_minHeight  : 100,
    autoGrow_maxHeight  : 400,
    removePlugins       : 'resize',
    toolbarLocation     : 'bottom',

}).on("instanceReady", function (e) {
    this.on("focus", function () {

    });

    this.on("blur", function () {

    });

    this.on( 'change', function() {

    });
});