JSFiddle - React, Tailwind, and code Playground

HTML

Téléphone: <div class="telholder">
<input type="text" class="tel" data-maxlength="2" value=""/>-
<input type="text" class="tel" data-maxlength="2" value=""/>-
<input type="text" class="tel" data-maxlength="2" value=""/>-
<input type="text" class="tel" data-maxlength="2" value=""/>-
<input type="text" class="tel" data-maxlength="2" value=""/>
</div>
<input type="button" id="foo" value="ok" />

CSS

.tel{
  width: 20px;
  border: 0;
  height: 12px;
}
.telholder {
border: solid 1px;
line-height: 18px;
height: 20px;
display: inline-block;
 padding-left: 2px;
}

JavaScript

$(function(){
            $(".tel").on('keyup',function () {
                ml = $(this).data("maxlength");
                reg =/\D/g;
                v = $(this).val().replace(reg,'');
                $(this).val(v);
                if (v.length>=ml){
                  $(this).next(".tel").focus();
                  $(this).blur();
                }
             });
             
             
$('#foo').on('click', function(){
$tel=[];
$(".tel").each( function(){ $tel.push($(this).val());});
alert($tel.join('-'));
})             


        });