Кратко выделите текст при вводе

У меня есть таблица html, в которой указывается размер (длина / ширина / высота / объем) по сравнению с метрикой (дюйм / фут / см / м). Каждый элемент td содержит элемент ввода. Когда вы меняете значение, остальные в таблице пересчитываются на основе нового значения. Вот рабочий пример:

http://jsfiddle.net/r9h8xfuy/1/

При изменении значения не все ячейки в таблице затрагиваются. Поэтому я хотел привлечь внимание к тем, на которые влияет, заставив их немного мигать.

Этот гораздо более простой пример раскрывает для меня суть дела:

http://jsfiddle.net/cft7n6ej/6/

Проблема заключается в том, что, хотя прослушиватель событий input делает именно то, что я хочу, с точки зрения пересчета значений таблицы, он плохо работает с функцией, которую я написал: glowText(element). А может моя функция воняет!

Я написал glowText(element), думая, что будет выполняться следующая логика: Я ввожу значение, которое фиксируется прослушивателем событий input. В качестве аргумента элемента в glowText добавлен класс glow. Когда я открываю консоль, я вижу, что рассматриваемый элемент может иметь много классов свечения, отсюда и пространство в element.className += ' glow';. Теперь, каждый раз, когда я добавляю класс glow, должна запускаться css-анимация. Но я надеялся, что он переопределит существующие анимации, но, похоже, этого не происходит. В любом случае, как только анимация css завершена, класс glow удаляется из элемента.

Результат, который я хотел бы, такой:

Всякий раз, когда запускается прослушиватель событий input, css-анимация glow запускается с самого начала, переопределяя любую запущенную в данный момент css-анимацию glow.

Краткое редактирование: Мне интересно, может ли возможное решение заключаться в прекращении текущей запущенной анимации css перед запуском следующей? Возможно ли это?

Вот ключевой момент CSS:

@keyframes glow {
 0% {
  color: rgb(255,40,180);
  font-weight: 900;
  text-shadow: 0px 0px 20px rgb(255,140,180);
 }
 50% {
  color: rgb(255,40,180);
  font-weight: normal;
  text-shadow: none;
 }
 100% {
  color: black;
 }
}

.glow {
 animation: glow 1s ease-out 0s 1;
 -webkit-animation: glow 1s ease-out 0s 1;
}

Javascript:

function glowText(element) {
 element.className += ' glow';
 element.addEventListener('animationend', function() {
  this.classList.remove('glow');
 });
}
var myInput = document.getElementById('myInput');
var myOutput = document.getElementById('myOutput')
myInput.addEventListener('input', function() {
  myOutput.textContent = myInput.value*2;
  glowText(myOutput);
})