JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="form-group">
 <span class="demo_txt"><i>Demo Mode: Enter any 6 digit number </i></span>
 </div>
    <form id="patientAuthorize"  Name="calc" method="post" novalidate>
        <div class="form-group centered">
            <input class="intxt" autocomplete="off" id="Phone" maxlength="7" name="display" type="tel" value="" placeholder="PIN"><button class="close-icon" type="reset"></button>

             <input class="button button-orange" type="button" onclick="window.location.href=&#39;startinterview.html&#39;" value="ENTER" style="width:100px">
        </div>

<div class="calculator">
    <!-- Screen and clear key -->

    <div class="keys">
        <!-- operators and other keys -->
        <span OnClick="calc.display.value+='1'">1</span>
        <span OnClick="calc.display.value+='2'">2</span>
        <span OnClick="calc.display.value+='3'">3</span>

        <span OnClick="calc.display.value+='4'">4</span>
        <span OnClick="calc.display.value+='5'">5</span>
        <span OnClick="calc.display.value+='6'">6</span>

        <span OnClick="calc.display.value+='7'">7</span>
        <span OnClick="calc.display.value+='8'">8</span>
        <span OnClick="calc.display.value+='9'">9</span>

        <span OnClick="calc.display.value+='0'" style="width: 166px;">0</span>
        <span class="clear" OnClick="calc.display.value=''">   <div class="xBox">X</div></span>

    </div>
</div>
    </form>

CSS

.keys span {
    background: #56a6e2;
    color: white;
    display: inline-block;
    padding: 0.5em 1em;
    cursor: pointer;
}

.keys span:hover {
    background: #366694;
}

JavaScript

var reformat = function () {
	// remove all non-numeric chars
	var txt = $("input.intxt").val().replace(/\D/g, "");
    // insert dash
    if (txt.length > 3) {
    	txt = txt.slice(0, 3) + "-" + txt.slice(3);
    }

	$("input.intxt").val(txt.substring(0, 7));
}

$("input.intxt").on("keyup", function() {
	reformat();
});

$(".keys span").on("click", function() {
	reformat();
});