JSFiddle - React, Tailwind, and code Playground

HTML

Instruction: type into status box and press Tab or Enter.  It will dynamically build a list.  I want to be able to click on an item to remove it from the list.  It works on the static list but not the dynamic one.
<hr/>
<input id="status" type="text" placeholder="Status (tab or enter)">

<br/>
Dynamic List:
<ul id="statusList"></ul>    
 
Static List:
<ul id="staticListWorks">
    <li>duh</li>
</ul>

JavaScript

$('#status').keydown(function (e) {
    if (e.which == 9 || e.which == 13) {
        $('#statusList').html($('#statusList').html() + formatNewStatus(this.value));
        this.value = "";
        this.focus();
        e.preventDefault();
    }
});

$(function () {
    $('#statusList').on("click", "li", function () {
        alert('dynamicList');
        $(this).remove();
    })
});

$(function () {
    $('#staticListWorks li').click(function () {
        alert('staticList');
        $(this).remove();
    })
});

function formatNewStatus(value) {
    return '<li>' + value + '</li>';
}