Переменный цвет шрифта в contenteditable

Question

Здравствуйте. Я пытаюсь изменить цвет шрифта при наборе текста.Однако при вводе нового текста мой текст имеет тот же цвет и не чередуется.Мне было интересно, почему это не чередуется, когда я набираю новые буквы.Большое спасибо за помощь.

$("span").each(function(index) {
  var originalText = $(this).text();
  var newText = "";
  for (var i = 0; i < originalText.length; i++) {
    if (i % 2 === 0)
      newText += "<span>" + originalText.charAt(i) + "</span>";
    else
      newText += originalText.charAt(i);
  }
  $(this).html(newText);
});

span {
  color: red;
  font-weight: bold;
}

span>span {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable=true>
  <span>this is just a test.</span>
  <br/>
  <span>color color color</span>
</div>

Answer 1

document.getElementById("inputArea").addEventListener('input',alternateColor);
alternateColor();
function alternateColor() {
 $( "span" ).each(function( index ) {
  var originalText = $( this ).text();
  var newText = "";
  for( var i = 0; i < originalText.length; i++)
  {
      if (i % 2 === 0)
        newText += "<span>" + originalText.charAt(i) + "</span>";  
      else
        newText += originalText.charAt(i);
  }
  $( this ).html(newText);
 });
}

span 
{
    color: red;
    font-weight: bold;
}

span > span
{
    color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id= "inputArea" contenteditable=true>
<span>this is just a test.</span>
<br/>
<span>color color color</span>
</div>