JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><img src="http://www.dearbornfreepress.com/wp-content/uploads/2010/10/the_letter_A.jpg" />a</li>
    <li><img src="http://2.bp.blogspot.com/-FJetGzG7c5g/TMrz-HIOXfI/AAAAAAAALKA/IkWwq_Pb6yI/s1600/65038_T-letter_lg.gif" />t</li>
    <li><img src="http://2.bp.blogspot.com/-RO9UV9XcQRY/ThjQHDHumBI/AAAAAAAAAME/xc0tw16OY80/s1600/letter+E.jpg" />e</li>
<ul>
    
<br /><br />

<input type="text" id="test" />
    
<br /><br />
Type the text in the boxes into the input, and see them change.

CSS

li {position: relative; height: 100px; width: 160px; display: inline-block; background: red; text-align: center; vertical-align: middle; margin: 20px;}


img {height: 100px; width: 160px;}

JavaScript

var text = ['ta', 'ber', 'u'];
var regex = new RegExp('^' + $.map(text, function(val, i){ return '(.{'+val.length+'})?'; }).join(''),'i');

var happy = ['http://www.vendian.org/howbig/UnstableURLs/letter_a_poster.png',
             'http://chineseknotting.org/projects/knotty/T-carrick.jpg',
             'http://etc.usf.edu/presentations/extras/letters/varsity_letters/38/17/E-400.png'
            ];

var grumpy = $('img').map(function(){ return this.src; }).get(); //gets the original images from the HTML

$("#test").on('keyup', function() {
    matches = $(this).val().match(regex);
    matches.shift();
    $.each(text, function(index, val){        
        if(val == matches[index]){
            $('li', 'ul').eq(index).find('img').attr('src', happy[index]);
        } 
        else {
            $('li', 'ul').eq(index).find('img').attr('src', grumpy[index]);
        }
    });
});