Untitled

<!DOCTYPE html>
    <head>
        <link rel="stylesheet" type="text/css" href="calculator.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSClexGzOj3Euiig+TIR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <p class="text-center font-weight-bold" id="inputstr"> </p>
            </div>

            <div class="row">
                <div class="col-xs-3">
                    <div class="calc-button-1">
                    1
                    </div>
                </div>
                <div class="col-xs-3">
                    <div class="calc-button-2">
                    2
                    </div>
                </div>
                <div class="col-xs-3">
                    <div class="calc-button-3">
                    3
                    </div>
                </div>
            <div class="col-xs-3">
                <div class="calc-button-mult">
                +
                </div>
            </div>
            </div>

            <div class="row">
            <div class="col-xs-3">
                <div class="calc-button-4">
                4
                </div>
            </div>
            <div class="col-xs-3">
                <div class="calc-button-5">
                5
                </div>
            </div>
            <div class="col-xs-3">
                <div class="calc-button-6">
                6
                </div>
            </div>
            <div class="col-xs-3">
                <div class="calc-button-sub">
                -
                </div>
            </div>
            </div>

            <div class="row">
            <div class="col-xs-3">
                <div class="calc-button-7">
                7
                </div>
            </div>
            <div class="col-xs-3">
                <div class="calc-button-8">
                8
                </div>
            </div>
            <div class="col-xs-3">
                <div class="calc-button-9">
                9
                </div>
            </div>
            <div class="col-xs-3">
                <div class="calc-button-mult">
                *
                </div>
            </div>
            </div>

            <div class="row">
            <div class="col-xs-3">
                <div class="calc-button-clear">
                    Clear
                </div>
            </div>
            <div class="col-xs-3">
                <div class="calc-button-0">
                0
                </div>
            </div>
            <div class="col-xs-3">
                <div class="calc-button-eval">
                =
                </div>
            </div>
            <div class="col-xs-3">
                <div class="calc-button-div">
                /
                </div>
            </div>
            </div>

        </div>
        <script>
            $(".calc-button-1").click(function(e){
                $("p").append("1");
            });
            $(".calc-button-2").click(function(e){
                $("p").append("2");
            });
            $(".calc-button-3").click(function(e){
                $("p").append("3");
            });
            $(".calc-button-4").click(function(e){
                $("p").append("4");
            });
            $(".calc-button-5").click(function(e){
                $("p").append("5");
            });
            $(".calc-button-6").click(function(e){
                $("p").append("6");
            });
            $(".calc-button-7").click(function(e){
                $("p").append("7");
            });
            $(".calc-button-8").click(function(e){
                $("p").append("8");
            });
            $(".calc-button-9").click(function(e){
                $("p").append("9");
            });
            $(".calc-button-0").click(function(e){
                $("p").append("0");
            });
            $(".calc-button-mult").click(function(e){
                $("p").append("*");
            });
            $(".calc-button-sub").click(function(e){
                $("p").append("-");
            });
                $(".calc-button-div").click(function(e){
                $("p").append("/");
            });
            $(".calc-button-add").click(function(e){
                $("p").append("+");
            });
            $(".calc-button-clear").click(function(e){
                $("p").text("");
            });
            $(".calc-button-eval").click(function(e){
                var inputstr = document.getElementById("inputstr").innerHTML;
                var urlstart = "aaas.cw-ngv.com:8080/?calc="
                var urlsend = urlstart + inputstr;
                $.get(urlsend, function( data ) {
                    $("p").text(data);
                });
            });
         </script>
    </body>
</html>