Проверка символов и порядка символов из формы ввода с помощью Javascript для отображения изображений, которые соответствуют как символам, так и порядку символов

Я создаю простую систему, которая будет отображать изображения в соответствии с буквами, найденными в форме ввода текста. Например, если пользователь вводит букву «p», отображается изображение с идентификатором #paris. Пример ниже работает и достигает первой части цели.

  <input id = "words" name = "email" class = "userInput" type = "text" /><span id = "emailError"></span>
  <br>
  <br>
      <div id = "Button" style = "height:100px; width: 150px; background-color: #000;">
        </div>
<img id = "paris" style = "display:none" src = "animsAll/paris.gif">

JQuery

$( "#words" ).keyup(function() {

if ($('#words').val().indexOf('p') > -1) {
    $('#paris').show();

}

});

Однако отсутствует один важный элемент.

Когда я добавляю больше изображений (будет 6 изображений на выбор), системе необходимо отображать эти изображения в соответствии с порядком, в котором пользователь ввел слово.

Это означает, что если пользователь набрал «peter», изображение, соответствующее «p», будет отображаться в течение нескольких секунд, а затем скрываться, а затем изображение, которое соединяется с «e», будет отображаться после этого. [Скрытие и установка времени не является проблемой.]

Мой вопрос действительно касается сортировки порядка символов, чтобы изображения отображались в том порядке, в котором вводил пользователь. Как система понимает порядок каждой буквы, чтобы изображения отображались в том же порядке, что и буквы?

Я понимаю IndexOf в наборе известных строк, но в случае форм ввода, где возможности бесконечны, как мне отсортировать символы, найденные во вводе пользователем (в примере "P, e, t, e, r" чтобы система правильно отображала порядок изображений?

[ДЕНЬ СПУСТЯ: СПАСИБО ЗА ОБНОВЛЕНИЕ ОТВЕТА И ВОПРОСА]

Спасибо!!! Теперь, когда я более подробно проработал проблему, я понимаю, что, возможно, исказил свой вопрос. Возможно, мне стоит задать другой вопрос. То, что я здесь делаю В самом деле, - это форма синхронизации губ анимации. Я создал (анимационных) персонажей, и у меня есть соответствующие движения рта в соответствии с каждой буквой для синхронизации губ.

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

[ОБНОВЛЕНИЕ]

Что происходит сейчас, так это то, что буквы совпадают с изображениями, появляются все одновременно. Кроме того, порядок, в котором появляются изображения, соответствует порядку, отображаемому в HTML, а не фактическому вводу пользователя. Вы можете увидеть пример, показанный на изображении ниже, где я написал «Питер», и система вернула четыре отдельных изображения. Кроме того, отсутствует второе изображение "е".

Спасибо, ребята, за ответы. Я проведу еще немного исследований по этому поводу. Я вижу направление, в котором мне нужно идти.

[СМОТРЕТЬ ИЗОБРАЖЕНИЕ НИЖЕ]

[HTML]

  <img id = "heatherCatPaw1AI" style = "display:none" src = "img_chars/Heather_catPaw_1_A,I.svg">
  <img id = "heatherCatPaw1E" style = "display:none" src = "img_chars/Heather_catPaw_1_E.svg">
  <img id = "heatherCatPaw1MPB" style = "display:none" src = "img_chars/Heather_catPaw_1_M,P,B.svg">
  <img id = "heatherCatPaw1O" style = "display:none" src = "img_chars/Heather_catPaw_1_O.svg">
  <img id = "heatherCatPaw1TS" style = "display:none" src = "img_chars/Heather_catPaw_1_T,S,ELSE.svg">
  <img id = "heatherCatPaw1UQ" style = "display:none" src = "img_chars/Heather_catPaw_1_U,Q.svg">
  <img id = "heatherCatPaw1WR" style = "display:none" src = "img_chars/Heather_catPaw_1_W,R.svg">

[JAVASCRIPT]

$("#btn").click(function() {
  $.each($("#myinput").val().split(''), function(index, value) {
      if ($('#myinput').val().indexOf('a') > -1) {
        $('#heatherCatPaw1AI').show().delay(200).fadeOut();
      }

      if ($('#myinput').val().indexOf('i') > -1) {
        $('#heatherCatPaw1AI').show().delay(200).fadeOut();
      }

      if ($('#myinput').val().indexOf('e') > -1) {
      $('#heatherCatPaw1E').show().delay(200).fadeOut();
      }

      if ($('#myinput').val().indexOf('m') > -1) {
      $('#heatherCatPaw1MPB').show().delay(200).fadeOut();
      }

      if ($('#myinput').val().indexOf('p') > -1) {
      $('#heatherCatPaw1MPB').show().delay(200).fadeOut();
      }

      if ($('#myinput').val().indexOf('b') > -1) {
      $('#heatherCatPaw1MPB').show().delay(200).fadeOut();
      }

      if ($('#myinput').val().indexOf('o') > -1) {
      $('#heatherCatPaw1O').show().delay(200).fadeOut();
      }


      if ($('#myinput').val().indexOf('') > -1) {
      $('#heatherCatPaw1TS').show().delay(200).fadeOut();
      }

      if ($('#myinput').val().indexOf('s') > -1) {
      $('#heatherCatPaw1TS').show().delay(200).fadeOut();
      }

      if ($('#myinput').val().indexOf('u') > -1) {
      $('#heatherCatPaw1UQ').show().delay(200).fadeOut();
      }

      if ($('#myinput').val().indexOf('q') > -1) {
      $('#heatherCatPaw1UQ').show().delay(200).fadeOut();
      }

      if ($('#myinput').val().indexOf('w') > -1) {
      $('#heatherCatPaw1WR').show().delay(200).fadeOut();
      }
      if ($('#myinput').val().indexOf('r') > -1) {
      $('#heatherCatPaw1WR').show().delay(200).fadeOut();
      }

  });