JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <span class="input-component"><input type="text"/><a href=#></a></span>
 </form>
<br><br>
<div id="numcontainer">
    <span class="containernum"></span><br>
</div>

CSS

article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  body {
    font-family: sans-serif;
  }
  p {
    margin: 0px;
  }
#numcontainer
    {
        display:  table;
        width:100px;
        height:100px
        background-color:#eee;
        border:1px solid  #666666;
        border-spacing:5px;/*cellspacing:poor IE support for  this*/
       /* border-collapse:separate;*/
    }
.containernum {
      -webkit-animation: fadein 2s; /* Safari and Chrome */
       -moz-animation: fadein 2s; /* Firefox */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

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-component input').on("propertychange keyup input paste",addInput);
    onlyNums($('form .input-component input'));
    initializeDelLink($('form .input-component'));
   function addInput() {
    var remainingChars = $(this).val().length;
    if (remainingChars == 24) {
        if ($('.containernum').text() == '') {
            $('.containernum').text($(this).val());
        } else {
            $('#numcontainer').append('<span class="containernum">'+$(this).val()+'</span><br>');
        }
        $(this).val(''); // does empty the text input
$('.containernum').each(function(index){
  // Your code
  console.log( $(this).html() );
});

        
        values.push($(this).val());
        console.log(values);
    }
}
    
    function initializeDelLink($elem){
        var $delLink=$elem.find('a');
            $delLink.click(function(){alert();
                $(this).parent('.input-component').remove();
            });
    }
    
    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();	
			}	
		}
	});
    }
    
    });