JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="fst" maxlength="1" class="def-txt-input" name="chars[1]"><br>
<input type="text" maxlength="1" class="def-txt-input" name="chars[2]"> <br>
<input type="text" maxlength="2" class="def-txt-input" name="chars[3]"> <br>
<input type="text" maxlength="1" class="def-txt-input" name="chars[4]"> <br>
<input type="text" maxlength="1" class="def-txt-input" name="chars[5]"> <br>
<input type="text" maxlength="1" class="def-txt-input" name="chars[6]"><br>

    Foo:
   <input name="foo0" maxlength=2> <input name="foo1" maxlength=2> <input name="foo2" maxlength=3>

CSS

/*2 4 1 - 2 4 2*/53-882-9999

JavaScript

/*var $inputs = $(".def-txt-input");
var intRegex = /^\d+$/;


// Prevents pasting non-digits and if value is 6 characters long will parse each character into an individual box.
$inputs.on("paste", function() {
    var $this = $(this);
    var originalValue = $this.val();
    
    $this.val("");

    $this.one("input.fromPaste", function(){
        $currentInputBox = $(this);
        var pastedValue = $currentInputBox.val().replace(/[^\d]/g, "");
        pasteValues(pastedValue);
        $inputs.attr("maxlength", 1);
    });
    
    $inputs.attr("maxlength", 6);
});


// Parses the individual digits into the individual boxes.
function pasteValues(element) {
    var values = element.split("");

    $(values).each(function(index) {
        var $inputBox = $('.def-txt-input[name="chars[' + (index + 1) + ']"]');
        if ($inputBox.length == 1){
           $inputBox.val(values[index]);
        }
    });
};

*/




/**
 * PasteHopAcross jquery plugin
 * Paste across multiple inputs plugin, 
 * inspired by http://jsfiddle.net/D7jVR/
 */
(function ($) {
    jQuery.fn.pastehopacross = function(opts){ 
       if (!opts){ opts = {} }
        if (!opts.regexRemove){
            opts.regexRemove = false;   
        }
        if (!opts.inputs){
           opts.inputs = [];   
        }
        if (opts.inputs.length == 0){
            //return 
            return $(this);   
        }
 
        if (!opts.first_maxlength){
            opts.first_maxlength = $(this).attr('maxlength');
            if (!opts.first_maxlength){
                return $(this);
            }
        }
        
       $(this).on('paste', function(){
      
           //remove maxlength attribute
           $(this).removeAttr('maxlength'); 
           $(this).one("input.fromPaste", function(){
               var $firstBox = $(this);

                var pastedValue = $(this).val();
                if (opts.regexRemove){
                     pastedValue = pastedValue.replace(opts.regexRemove, "");
  ...