Modifiable character data inside div with dom manipulation for text color change

contentEditable

textarea {
    height: 200px;
    width: 200px;
}
div.overlay {
    z-index: 200;
    height: 200px;
    width: 200px;
    position: absolute;
    left: 517px;
    background: white;
    border: 1px solid;
    /*pointer-events: none;*/
}
div.error {
    color: red;
}
$(function() {
    /*
    $('div.overlay').on('click', function(event) {
        event.preventDefault();
        $(this).hide();
        var x = event.originalEvent.x;
        var y = event.originalEvent.y;
        var textarea = document.elementFromPoint(x, y);
        $(textarea).focus()
        $(this).show();
    });
    
    $('textarea').keyup(function() {
        var textvalue = $(this).val();
        $('div.overlay').html(textvalue);
    });*/
    $.fn.ignore = function(selector){
        return this.clone().find(selector).remove().end();
    };
    $('div.overlay').on('focusout', function(event) {
        // Email array
        var emails = new Array();
        var firstText = $(this).ignore('div').text();
        if(firstText !== '') {
            var children = $(this).find('div');
            $(this).empty();
            $(this).append($('<div>').text(firstText)).append(children);
        }
        // loop through children
        $(this).children().each(function(index,value) { 
            var email = $.trim($(value).text()); 
            if(email !== '' && email !== 'asdf') {
                emails.push(email);
            } else if(email === 'asdf') {
                $(value).addClass('error');
            }
        });
        console.log(emails);
    });
    $('div.overlay').on('keyup', function(event) {
        console.log('adfa');
    });
    $('div.overlay').on('DOMCharacterDataModified', function(event){
        var clicked = $(event.target);
        console.log(clicked);
        $(clicked).removeClass('error');
    });
});

<textarea>
</textarea>
<div class="overlay" contentEditable="true"></div>