compare two client typed text fields jQuery

[dribdas]

I have some problems with my jQuery "compare" function. Its mission is to compare two text areas and highlight the differences.eg. "My name is Michael" in one text area, and "My name is Michel" in another.My function shall return both inputs and highlight the char "a" from the first input, and highlight a missing char from the second.This is how the function looks so far, but it doesn't seem to work 100% of the time.\[code\]$(function () {$('#btnCompare').on('click', function () { compare();});function compare() { $('#divColLeft').empty(); $('#divColRight').empty(); var textOne = $('#taOneComp').val(); var textTwo = $('#taTwoComp').val(); var output; var outputX; var arrTextOne = []; var arrTextTwo = []; for (var i = 0; i < textOne.length; i++) { output = textOne.charAt(i); arrTextOne.push(output); } for (var x = 0; x < textTwo.length; x++) { outputX = textTwo.charAt(x); arrTextTwo.push(outputX); } $.each(arrTextOne, function (y, e) { if ($.inArray(e, arrTextTwo) == -1) { $('#divColLeft').append(e); $('#divColLeft').highlight(e); } else { $('#divColLeft').append(arrTextOne[y]); } }); $.each(arrTextTwo, function (z, f) { if ($.inArray(f, arrTextOne) == -1) { $('#divColRight').append(f); $('#divColRight').highlight(f); } else { $('#divColRight').append(arrTextTwo[z]); } });}\[/code\]});