JSFiddle - React, Tailwind, and code Playground

by Barry Margolin

HTML

<script src="http://www.barrycorrigan.com/assets/js/vendor/jquery.maskedinput.min.js"></script>
<form method="post" name="form" id="form" class="form" action="">
    <div>
    <legend>Country</legend>

    <input id="usa" name="country" type="radio">
    <label for="usa">United States</label>

    <input id="argentina" name="country" type="radio">
    <label for="argentina">Argentina</label>
</div>

<div>
    <label>Phone Number</label>
    <input id="phone" name="phone" class="phone" type="tel" />
    <br>
        <span>Example: <span id="example">123-456-7890</span></span>
</div>
    
</form>

CSS

div {
    display: block;
}

JavaScript

$("#usa").click(function() {
  $(".phone").mask("999-999-9999", {
    placeholder: " "
  });
    $("#example").text("123-456-7890");
});
$("#argentina").click(function() {
  $(".phone").mask("99-99-9999-9999", {
    placeholder: " "
  });
    $("#example").text("12-34-5678-9000");
});

$("#usa").click(); // Set default