PayPal Donation 3

HTML

<p>Choose below the amount of your donation</p>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">

    <input type="hidden" name="cmd" value="_donations">
    <input type="hidden" name="business" value="[email protected]">

    <label><input type="checkbox" name="amount" class="checkbutton" value="5,00"><span>€05.00</span></label>
    <label><input type="checkbox" name="amount" class="checkbutton" value="10,00"><span>€10.00</span></label>
    <label><input type="checkbox" name="amount" class="checkbutton" value="15,00"><span>€15.00</span></label>
    <label><input type="checkbox" name="amount" class="checkbutton" value="20,00"><span>€20.00</span></label>
    <input type="number" class="textBox" name="amount" placeholder="€ Other">

    <input type="hidden" name="item_name" value="Donation">
    <input type="hidden" name="item_number" value="Donation">
    <input type="hidden" name="currency_code" value="EUR">
    <input type="hidden" name="lc" value="SK">
    <input type="hidden" name="bn" value="Louzanimales_Donation_WPS_SK">
    <input type="hidden" name="return" value="http://www.louzanimales.py/agradecimentos.htm">


    <br style="clear: both;"/>
    <input class="donation-button" type="submit" value="Send Donation">

</form>

CSS

body {
    box-sizing: border-box;
    padding: 50px;
    font-family: sans-serif; 
    font-size: 18px;
    text-align: center;
}

label {
    margin: 1%;
    float: left;
    background: #ccc;
    text-align: center;
    width: 18%;
}

label:hover {
    background: grey;
    color: #fff;
}

label span {
    text-align: center;
    box-sizing: border-box;
    padding: 10px 0;
    display: block;
}

label input {
    display: none;
    left: 0;
    top: -10px;
}

input:checked + span {
    background-color: black;
    color: #fff;
}

/* Hide HTML5 Up and Down arrows in input type="number" */
input[type=number] {-moz-appearance: textfield;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    appearance: none;
    margin: 0; 
}


.textBox {
    margin: 1%;
    float: left;
    background: #ccc;
    border: 0; 
    padding: 10px 0;
    text-align: center;
    font-family: sans-serif; 
    font-size: 18px;
    width: 18%;
    -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
    -moz-box-sizing: border-box; /* For all Gecko based browsers */
    box-sizing: border-box;
}

.textBox:focus {
    box-shadow:none;
    box-shadow:inset 0 0 4px 0 #000;
   -moz-box-shadow:inset 0 0 4px 0 #000;
   -wevkit-box-shadow:inset 0 0 4px 0 #000;
}

.donation-button {
    width: 98%;
    margin: 1%;
    border: 0;
    background: grey;
    color: white;
    text-align: center;
    font-family: sans-serif; 
    font-size: 18px;
    padding: 10px 0 10px 0;
    -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
    -moz-box-sizing: border-box; /* For all Gecko based browsers */
    box-sizing: border-box;
}
.donation-button:hover {
    background: black;
}

JavaScript

$('input.checkbutton').on('change', function() {
    $('input.checkbutton').not(this).prop('checked', false);
});

$(".textBox").focus(function() {
    $(".checkbutton").prop("checked", false);
});

$(".checkbutton").change(function() {
    if($(this).is(":checked")) { 
        $(".textBox").val(""); 
    } 
});