JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    Notice that the "down" and "press" always have the old text
</p>
<ul id="result">
</ul>
<input id="text" type="text"/>

JavaScript

$("#text")
    .keypress(function() {
        $("#result").append($("<li>" + $(this).val() + " : press</li>"));
    })
    .keyup(function() {
        $("#result").append($("<li>" + $(this).val() + " : up</li>"));
        $("#result").append($("<li>-----------------------------</li>"));
    })
    .keydown(function() {
        $("#result").append($("<li>" + $(this).val() + " : down</li>"));
    })