JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" class="display" id="display" readonly />
        <br>
        <br> //code of button
        <p></p>
        <button href="#" type="button" class="number" id="one" value="1">1</button>
        <button href="#" type="button" class="number" id="two" value="2">2</button>
        <button href="#" type="button" class="number" id="three" value="3">3</button>
        <button href="#" type="button" class="function" id="add" value="+">+</button>
        <button href="#" type="button" class="function" id="multi" value="x">x</button>
        <p></p>
        <button href="#" type="button" class="number" id="four" value="4">4</button>
        <button href="#" type="button" class="number" id="five" value="5">5</button>
        <button href="#" type="button" class="number" id="six" value="6">6</button>
        <button href="#" type="button" class="function" id="sub" value="-">-</button>
        <button href="#" type="button" class="function" id="divide" value="/">/</button>
        </p>
        <button href="#" type="button" class="number" id="seven" value="7">7</button>
        <button href="#" type="button" class="number" id="eight" value="8">8</button>
        <button href="#" type="button" class="number" id="nine" value="9">9</button>
        <button href="#" type="button" class="number" id="zero" value="0">0</button>
        <button href="#" type="button" class="clear" id="clear" value="C">C</button>
        <br></br>
        <button type="button" class="equal" id="equ" value="=">=</button>

JavaScript

$(function(){
    // set value to 0 at first
    $('#display').val(0);

    $(document).on('click', 'button.number', function(){
        $('#display').val($(this).val());
    });
});