JSFiddle - React, Tailwind, and code Playground

HTML

-<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="https://raw.github.com/digitalBush/jquery.maskedinput/1.3.1/dist/jquery.maskedinput.min.js" type="text/javascript"></script>
(<input id="phone11" />)<input id="phone12" />-<input id="phone13" /></br>
(<input id="phone21" />)<input id="phone22" />-<input id="phone23" /></br></br>
<button id="print">print</button> <button id="reload">reload</button>
</br></br>

<script src="https://raw.github.com/RobinHerbots/jquery.inputmask/2.x/js/jquery.inputmask.js" type="text/javascript"></script>
<script src="https://raw.github.com/RobinHerbots/jquery.inputmask/2.x/js/jquery.inputmask.extensions.js" type="text/javascript"></script>
<input type="text" id="full"></br>
<span style="color: red; font-size:small">If your phone has 8 mumbers, type space after fourth</span>

<script type="text/javascript">
$(document).ready(function () {
	$("#phone11").mask("99");		$("#phone21").mask("99");
	$("#phone12").mask("9999?9");	$("#phone22").mask("9999?9");
	$("#phone13").mask("9999");		$("#phone23").mask("9999");
	$('#full').inputmask('(99)9999[9]-9999');

	$("#reload").click(function(){
		var original11 = "99123450123";
		$('#phone11').val(original11.substring(0,2));
		$('#phone12').val(original11.substring(2,7));
		$('#phone13').val(original11.substring(7));

		var original10 = "9912340123";
		$('#phone21').val(original10.substring(0,2));
		$('#phone22').val(original10.substring(2,6));
		$('#phone23').val(original10.substring(6));

	});
   
	$("#print").click(function(){
		var view = "("+$('#phone11').val()+")"+$('#phone12').val()+"-"+$('#phone13').val();
		var db = $('#phone11').val()+$('#phone12').val()+$('#phone13').val();
		alert("input 1 view: "+view);
		alert("input 1 db: "+db);
		
		view = "("+$('#phone21').val()+")"+$('#phone22').val()+"-"+$('#phone23').val();
		var db = $('#phone21').val()+$('#phone22').val()+$('#phone23').val();
		alert("input 2 view: "+view);
		alert("input 2 db:...