JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha512.js"></script>
<form>
    <fieldset>
        <input placeholder="Last Deposit Transaction ID" type="text" name="last_deposit_trx_id" style="width:200px">
        <br>
        <input placeholder="Bet Number" type="text" name="bet_number" style="width:200px">
        <br>
        <input placeholder="Bet Hash" type="text" name="bet_hash" style="width:200px">
        <br>
        <input placeholder="Secret" type="text" name="secret" style="width:200px">
    </fieldset>
    <p style="display:none" id="valid">VALID</p>
    <p style="display:none" id="invalid">INVALID</p>
    <input type="button" value="Verify" id="verify">
</form>

CSS

#invalid {
    color: red;
}

#valid {
    color: green;
}

JavaScript

$(function () {
    $(document).on('click', '#verify', function (e) {
        e.preventDefault();

        var last_deposit_trx_id = $('input[name = last_deposit_trx_id]').val();
        var bet_number = $('input[name = bet_number]').val();
        var bet_hash = $('input[name = bet_hash]').val();
        var secret = $('input[name = secret]').val();


        var hash = CryptoJS.SHA512(last_deposit_trx_id + ':' + bet_number + secret);

        if (hash.toString() == bet_hash) {
            $('#valid').show();
            $('#invalid').hide();
        } else {
            $('#invalid').show();
             $('#valid').hide();
        }
        
        console.log(hash.toString());
    });



});