JSFiddle - React, Tailwind, and code Playground

HTML

<div id="screen"></div>

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>0</li>
</ul>

<div id="back">Backspace</div>

CSS

ul {
    width: 150px;
}
ul li {
    float:left;
    width:30px;
    height:20px;
    border:1px solid #000;
    margin:0 10px 10px 0;
    cursor:pointer;
}
ul li:last-child {
    margin: 0 0 10px 42px;
}
#back, #screen {
    clear:both;
    width:115px;
    border:1px solid #000;
    text-align:center;
    height:20px;
}
#back {
    cursor:pointer;
}
#screen {
    margin-bottom:20px;
}

JavaScript

$('ul li').on('click', function() {
    var value = $(this).text(),
        screen = $('#screen').text(),
        newscreen = screen+value;        
    $('#screen').html(newscreen);
});

var timeoutId = 0;

$('#back').mousedown(function() {
    timeoutId = setInterval(backspace, 200);
}).on('mouseup mouseleave', function() {
    clearInterval(timeoutId);
});

function backspace() {
   var screen = $('#screen').text(),
       screenlength = screen.length,       
       newscreen = screen.substring(0, screenlength-1);
    if(screenlength > 0) {
        $('#screen').text(newscreen);
    }
}