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').keypress(function() {
        addAll();
    });

    var addAll = function() {
        var input1 = $('#user > input:nth-child(1)').val();
        var input2 = $('#user > input:nth-child(2)').val();
        var input3 = $('#user > input:nth-child(3)').val();
        var input4 = $('#user > input:nth-child(4)').val();
        var input = input1 + input2 + input3 + input4;
        var inputarray = input.split('');
        $.each(inputarray,function(i,v){
           if((i+1)%4 == 0 && i< inputarray.length -1 ) {
            inputarray[i] = v+'-';
           }
        });
        input = inputarray.join('');
         $('#op > input').val(input);
        
        
    };
    $('input').on('keypress keyup blur', function(event) {
        $(this).val($(this).val().replace(/[^\d].+/, ""));
        if ((event.which < 48 || event.which > 57)) {
            event.preventDefault();
        }
    });
});