JSFiddle - React, Tailwind, and code Playground

HTML

<table style="width:100%;">
    <tr>
        <td style="width:33.3%">
            <input type="text" class="initialbox" maxlength="1" size="1" id="firstinitial" />
        </td>
        <td style="width:33.3%">
            <input type="text" class="initialbox" maxlength="1" size="1" id="secondinitial" />
        </td>
        <td style="width:33.3%">
            <input type="text" class="initialbox" maxlength="1" size="1" id="thirdinitial" />
        </td>
    </tr>
    <tr>
        <td style="width:33.3%">1st Initial</td>
        <td style="width:33.3%">2nd Initial</td>
        <td style="width:33.3%">3rd Initial</td>
    </tr>
</table>

JavaScript

$(".initialbox").keyup(function () {
	    if (this.value.length == 1) {
	        alert();
	        $(this).next('.initialbox').focus();
	    }
	});