JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input type="text" value="" id="tf1" class="textfield" />
    <input type="text" value="" id="tf2" class="textfield" />
    <input type="text" value="" id="tf3" class="textfield" />
    <input type="text" value="" id="tf4" class="textfield" />
    <input type="text" value="" id="tf5" class="textfield" />
    <select id="myselect">
        <option value="All">All</option>
    </select>
</form>
<p id="replace">Replace</p>

JavaScript

var typingTimer;
var doneTypingInterval = 1000;

$('.textfield').bind('keyup', function (e) {
    clearTimeout(typingTimer);
    if ($(this).val) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

function doneTyping() {
    var numfilled = $('.textfield[value!=""]').length;
    if (numfilled > 2) {
        var options = '';
        options += '<option value="All">All</option>';
        for (var i = 1; i < numfilled; i++) {
            options += '<option value="' + i + '">' + i + '</option>';
        }
        $("select#myselect").html(options);
    }
    $('#replace').html(numfilled);
}