JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="user" class="input">
Type numeric :
    <input type="text" maxlength="4" /> -
    <input type="text" maxlength="4" /> -
    <input type="text" maxlength="4" /> -
    <input type="text" maxlength="4" />
</div>
<div id="op" class="input">
    <input type="text" />
</div>

CSS

.input {
    color: #666666;
    font-weight: bold;
    font-family:arial;
    font-size:15px;
}
.input input {
    width: 40px;
    border: 1px solid #cccccc;
    outline: none;
    padding: 5px 10px;
    color: #57b2bd;
    font-size: 18px;
    border-radius: 5px;
    background: #f3f3f3;
    -transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
}
.input input:focus {
    background: #fcfcfc;
    box-shadow: 0px 2px 2px #dbdbdb;
}
div:nth-child(2) {
    font-family: arial;
    padding: 30px 0;
}
div:nth-child(2) input {
    color:#555555;
    width: 213px;
}

JavaScript

$(document).ready(function() {
    $('#user > input').keyup(function() {
        addAll();
    });

    var addAll = function() {
        inputs=[];
        for(i=1;i<=4;i++)
        {
        	var val = $.trim($('#user > input:nth-child('+i+')').val());
          masked_input= val+ ("        ".substr(val.length*2));
          inputs.push(masked_input);
        }
        $('#op > input').val(inputs.join(' - '));
    };
    $('input').on('keypress keyup blur', function(event) {
        $(this).val($(this).val().replace(/[^\d].+/, ""));
        if ((event.which < 48 || event.which > 57)) {
            event.preventDefault();
        }
    });
  $('#user > input:first').trigger('keyup');
});