JSFiddle - React, Tailwind, and code Playground
HTML
<table width="474" border="0" align="center" cellpadding="7" cellspacing="7">
<tr>
<td width="41"><label for="riddle">Riddle</label></td>
<td colspan="7">What goes up and never comes down?</td>
</tr>
<tr>
<td> </td>
<td width="52"><div id="div1" class="answerbox letterA">A</div></td>
<td width="25"><div id="div2"class="answerbox letterS">S</div></td>
<td width="50"><div id="div3"class="answerbox letterD">D</div></td>
<td width="50"><div id="div4"class="answerbox letterF">F</div></td>
<td width="50"><div id="div13"class="answerbox letterF">F</div></td>
<td width="50"><div id="div5"class="answerbox letterG">G</div></td>
<td width="52"><div id="div6"class="answerbox letterH">H</div></td>
</tr>
<tr>
<td> </td>
<td><div id="div7"class="answerbox letterK">K</div></td>
<td><div id="div8"class="answerbox letterL">L</div></td>
<td><div id="div9"class="answerbox letterM">M</div></td>
<td><div id="div10"class="answerbox letterN">N</div></td>
<td><div id="div11"class="answerbox letterO">O</div></td>
<td><div id="div12"class="answerbox letterP">P</div></td>
<td><div id="div14"class="answerbox letterE">E</div></td>
</tr>
<tr>
<td>Anwer</td>
<td colspan="7"><label for="answer"></label>
<input name="answer" type="text" id="answer" size="40" /></td>
</tr>
<tr>
<td colspan="8"><div align="center">
<input type="submit" name="button" id="button" value="Submit" />
</div></td>
</tr>
<tr>
<td colspan="8"> </td>
</tr>
</table>
CSS
.fader {
color:silver!important;
}
JavaScript
$(function() {
$("#answer").on("keyup",function(e){
if (e.keyCode == 8) {
temp = $("#answer").val().toUpperCase();
wordAr = temp.split("");
$(".fader").removeClass("fader");
$.each(wordAr, function(k,v) {
console.log(v)
$(".letter" + v).each(function() {
if (!$(this).hasClass("fader")) {
$(this).addClass("fader");
return false;
}
});
});
} else {
if (e.keyCode >= 65 && e.keyCode <= 90) {
fadeLetter = String.fromCharCode(e.keyCode);
$(".letter" + fadeLetter).each(function() {
if (!$(this).hasClass("fader")) {
$(this).addClass("fader");
return false;
}
});
}
}
});
});