JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-group">
                    <input class="btn" type="button" value="()" id="parentesis" />
                    <input class="btn" type="button" value="1" id="1" />
                    <input class="btn" type="button" value="2" id="2" />
                    <input class="btn" type="button" value="3" id="3" />
                    <input class="btn" type="button" value="+" id="sumar" /><br />
                    <input class="btn" type="button" value="4" id="4" />
                    <input class="btn" type="button" value="5" id="5" />
                    <input class="btn" type="button" value="6" id="6" />
                    <input class="btn" type="button" value="-" id="restar" /><br />
                    <input class="btn" type="button" value="7" id="7" />
                    <input class="btn" type="button" value="8" id="8" />
                    <input class="btn" type="button" value="9" id="9" />
                    <input class="btn" type="button" value="*" id="multiplicar" /><br />
                    <input class="btn" type="button" value="0" id="0" />
                    <input class="btn" type="button" value="=" id="igual" />
                    <input class="btn" type="button" value="C" id="C" />
                    <input class="btn" type="button" value="/" id="dividir" />
                    <asp:Button ID="btn_login" OnClick="docreateformula" CssClass="btn btn-primary btn-lg center-block" Text="Guardar" runat="server"/>
                </div>
<input type="text" name="ContentPlaceHolder1_formula" id="ContentPlaceHolder1_formula"></div>

JavaScript

function occurrences(string, subString, allowOverlapping){

    string+=""; subString+="";
    if(subString.length<=0) return string.length+1;

    var n=0, pos=0;
    var step=(allowOverlapping)?(1):(subString.length);

    while(true){
        pos=string.indexOf(subString,pos);
        if(pos>=0){ n++; pos+=step; } else break;
    }
    return(n);
}

    $("input:button").click(function () {
 alert("sss");
        valor = $(this).val();
        actual = $("#ContentPlaceHolder1_formula").val();
        if (valor == "C") {
            $("#ContentPlaceHolder1_formula").val("");
        }
        else if(valor=="()")
        {
       var count1= occurrences(actual,'(',false);
       var count2= occurrences(actual,')',false);
            var count=count1+count2;
            if(count%2==0)  { $("#ContentPlaceHolder1_formula").val(actual+"("); 
                            } 
            else {
           $("#ContentPlaceHolder1_formula").val(actual+")"); 
            }
                    }
        else {
            if (valor == "=") {
                $("#ContentPlaceHolder1_formula").val(eval(actual));
            } else {
                $("#ContentPlaceHolder1_formula").val(actual + valor);
            }
        }
    });