JSFiddle - React, Tailwind, and code Playground

HTML

<p id="input" style="border:1px solid black" style="width:100px"><br></p>
<table>
    <tr>
        <td><button style="width:100%">m+</button></td>
        <td><button style="width:100%">m-</button></td> 
        <td><button style="width:100%">mc</button></td>
        <td><button style="width:100%" onclick='memory("mr")'>mr</button></td>
        <td><button onclick="clearAll()" style="width:100%">c</button></td>
    </tr>
    <tr>
        <td><button onclick="addChar('7')" style="width:100%">7</button></td>
        <td><button onclick="addChar('8')" style="width:100%">8</button></td>   
        <td><button onclick="addChar('9')" style="width:100%">9</button></td>
        <td><button onclick="setOperator('/')" colspan="2" style="width:200%">/</button></td>
    </tr>
    <tr>
        <td><button onclick="addChar('4')" style="width:100%">4</button></td>
        <td><button onclick="addChar('5')" style="width:100%">5</button></td>       
        <td><button onclick="addChar('6')" style="width:100%">6</button></td>
        <td><button onclick="setOperator('*')" colspan="2" style="width:200%">*</button></td>
    </tr>
    <tr>
        <td><button onclick="addChar('1')" style="width:100%">1</button></td>
        <td><button onclick="addChar('2')" style="width:100%">2</button></td>   
        <td><button onclick="addChar('3')" style="width:100%">3</button></td>
        <td><button onclick="setOperator('-')" colspan="2" style="width:200%">-</button></td>
    </tr>
    <tr>
        <td><button style="width:100%">+/-</button></td>
        <td><button onclick="addChar('0')" style="width:100%">0</button></td>
        <td><button onclick="addChar('.')" style="width:100%">.</button></td>
        <td><button onclick="calculate()" style="width:100%">=</button></td>
        <td><button onclick="setOperator('+')" style="width:100%">+</button></td>
    </tr>
</table>

JavaScript

var str = "";
var operand1 = 0;
var operand2 = 0;
var op = "";
var mem = 0;
var input = document.getElementById("input");
function addChar(char) {
    console.log('addchar made')
    str += char;
    input.innerHTML = str;
}
function clearAll() {
    console.log('clear made');
    str = "<br>";
    input.innerHTML = str;
}

function setOperator(operator) {
    op = operator;
    operand1 = str;
    str = "";
    input.innerHTML = "<br>";
}
function calculate() {
    operand2 = str;
    if (op === "+")
    {
        str = ((+operand1) * 10 + (+operand2) * 10)/10;
    }
    else if (op === "-")
    {
        str = (operand1 - operand2);
    }
    else if (op === "*")
    {
        str = (operand1 * operand2);
    }
    else if (op === "/")
    {
        str = (operand1 / operand2);
    }
    input.innerHTML = str;
}