JSFiddle - React, Tailwind, and code Playground

HTML

<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
<input id="screen" type ="text" value=""/>
<table>
<tr>
  <td class="but">1</td>
  <td class="but">2</td>
  <td class="but">3</td>
</tr>
<tr>
  <td class="but">4</td>
  <td class="but">5</td>
  <td class="but">6</td>
</tr>
<tr>
<td class="but">7</td>
<td class="but">8</td>
<td class="but">9</td>
</tr>
<tr>
  <td class="del"><</td>
  <td class="but">0</td>
  <td class="clr">Clr</td>
</tr>
</table>

CSS

table {
  margin-left: 9px;
  border-spacing: 5px;
}
td {width: 40px;
    height: 40px;}
.but,.del, .clr {    
    font-family: verdana;
    cursor: pointer;
    border: solid 2px silver;
    text-align: center;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;}
#screen {
font-family: 'Orbitron';
font-size: 20px;
width: 165px;
border: solid 2px silver;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding : 3px 0 0 4px;
height: 35px;

}

JavaScript

$( function(){
tel=[];
pad=[1,2,3,4,5,6,7,8,9,0];
function shuffleKeypad(kpad){

$('.but').each( function(){ $(this).html(pad.pop());});
pad=[1,2,3,4,5,6,7,8,9,0];
}

$('.but').on( "click", function(){
  if(tel.length==10){ return false; }
	nr= Math.floor( Math.random()*10);
	tel.push( nr.toString());
	$('#screen').val( tel.join('') );
  shuffleKeypad( pad.sort(function (a, b) { return 0.5 - Math.random(); }));
})


$('.del').on( "click", function(){
	tel.pop();
  $('#screen').val( tel.join('') );
  })

$('.clr').on( "click", function(){
	shuffleKeypad( pad.reverse() );
  tel=[];
  $('#screen').val('');
  })
});