JSFiddle - React, Tailwind, and code Playground

by M0rdent

HTML

<script src="https://cdn.jsdelivr.net/npm/cleave.js@1.6.0/dist/cleave.min.js"></script>
<div id="parent">
<input type="text" data-cleave="phone" data-cleave-id="123456789">
<input type="text" data-cleave="phone" data-cleave-id="456987521">
<input type="text" data-cleave="inn" data-cleave-id="1234456856789">
<input type="text" data-cleave="passport" data-cleave-id="asad21341">
</div>

JavaScript

$('#parent').find('[data-cleave]').each(function (i,e) {
	var opt;
  switch ($(e).attr('data-cleave')) {
  	case 'phone': opt = {numericOnly:true,blocks:[12],prefix:'+7'};break;
    case 'inn': opt = {numericOnly:true,blocks:[12]};break;
    case 'passport': opt = {numericOnly:true,blocks:[4,6],delimiter:'-'};break;
    default: opt = {numericOnly:true,blocks:[12],prefix:'+'};break;
 	}
  new Cleave('[data-cleave-id="'+$(e).attr('data-cleave-id')+'"]',opt);
});