JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td>
    <input type="text" id="serialNumber" class="" />
    <input type="hidden" id="hiddenSerialCode" value="01327"/>
    </td>
  </tr>
</table>

<div id="scroll-pane" class="scroll-pane">

JavaScript

$(document).ready(function() {
        $("#serialNumber").focus();
        
        $(document).keydown(function() {
            $("#serialNumber").focus();
        });
        var code = $("#hiddenSerialCode").val();

        $("#serialNumber").keyup(function() {
            var $this = $(this);
            var d = $this.val();
            var d5 = d.substring(0, 5);

            if (d.length > 20) {
                alert('Incorrect Serial Code');
            }
            else if (d.length == 20 && d5 != code) {
                var serialCode = d.substring(0, 8);
                alert('Serial Code: ' + serialCode);
                $this.val("");
            }
            else if (d.length == 20 && d5 == code) {
                var flagNumber = d.substring(0, 6);
                var errorNumber = d.substring(7, 10);
                alert('Flag Number ' + flagNumber + '\nError Number ' + errorNumber);
                $this.val("");
            }
        });
    });