JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <input type="text" id="bar" size="15" readonly>
    <input type="button" value="C" onclick="reset('')">
</p>
<p>
    <input type="button" value="←" id="backspace">
    <input type="button" value="­" onclick="">
    <input type="button" value="­" onclick="">
    <input type="button" value="­" onclick="">
    <input type="button" value="­" onclick="">
</p>
<p>
    <input type="button" value="7" onclick="v('7')">
    <input type="button" value="8" onclick="v('8')">
    <input type="button" value="9" onclick="v('9')">
    <input type="button" value="/" onclick="v('/')">
    <input type="button" value="­" onclick="">
</p>
<p>
    <input type="button" value="4" onclick="v('4')">
    <input type="button" value="5" onclick="v('5')">
    <input type="button" value="6" onclick="v('6')">
    <input type="button" value="*" onclick="v('*')">
    <input type="button" value="­" onclick="">
</p>
<p>
    <input type="button" value="1" onclick="v('1')">
    <input type="button" value="2" onclick="v('2')">
    <input type="button" value="3" onclick="v('3')">
    <input type="button" value="-" onclick="v('-')">
    <input type="button" value="­" onclick="">
</p>
<p>
    <input type="button" value="0" onclick="v('0')">
    <input type="button" value="." onclick="v('.')">
    <input type="button" value="+" onclick="v('+')">
    <input type="button" value="=" onclick="equal()" id="equal">
    <input type="button" value="­" onclick="">
</p>
<div id="history"></div>

JavaScript

function c(val) {
    var1 = $("#bar").val(val);
}

function v(val) {
    var2 = $("#bar").val($("#bar").val() + val);
}

function equal() {
    var3 = c(eval($("#bar").val()));
}

function reset() {
    var4 = $("#bar").val("");
}

$(document).ready(function () {
    $("#backspace").click(function () {
        var barValue = $("#bar").val();
        $("#bar").val(barValue.substring(0, barValue.length - 1));
    });
});