JSFiddle - React, Tailwind, and code Playground

HTML

<button id="add">add focused input</button>&nbsp;with
<input type="number" id="delay" value="0" />ms delay before focus()
<div id="container"></div>

JavaScript

$('#add').click(function () {
    $('input:not(#delay)').remove();

    var $input = $('<input type="number" />').on({
        focus: function (e) {
            console.log('focus', e.target);
        },
        blur: function (e) {
            console.log('blur', e.target);
        }
    });

    var delay = parseInt($('#delay').val(), 10) || 0;
    console.log('focus after ' + delay + 'ms');
    $input.appendTo($('#container'));
    if (!delay) {
        $input.trigger('focus');
    } else {
        setTimeout(function () {
            $input.trigger('focus');
        }, delay);
    }
});