JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input type='text'/>
  </form>

CSS

article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  body {
    font-family: sans-serif;
  }
  p {
    margin: 0px;
  }

JavaScript

jQuery(function($) {

    var values = [];
    
      $('form input[type=text]').change(fileChangeHandler);
      function fileChangeHandler() {
        var form = $(this).closest('form');        
      }
     var form = $(this).closest('form');
    
    $('form input').on("propertychange keyup input paste",

    addInput);
    onlyNums($('form input'));
    function addInput() {
        var remainingChars = $(this).val().length;
        if (remainingChars == 24) {
            var newInput = $('<input type="text">').change(fileChangeHandler).appendTo('form').focus().on("propertychange keyup input paste",addInput);
            onlyNums(newInput);
            values.push($(this).val());
            console.log(values);
        }}
    
    function onlyNums($elem){
    	$elem.keydown(function(event) {
		// Allow only backspace and delete
		if ( event.keyCode == 46 || event.keyCode == 8 ) {
			// let it happen, don't do anything
		}
		else {
			// Ensure that it is a number and stop the keypress
			if (event.keyCode < 48 || event.keyCode > 57 ) {
				event.preventDefault();	
			}	
		}
	});
    }
    
    });