JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="donate-now">
    <li>
        <label for="a25">
            <input type="radio" id="a25" name="amount">$25</label>
    </li>
    <li>
        <label for="a50">
            <input type="radio" id="a50" name="amount">$50</label>
    </li>
    <li>
        <label for="a75">
            <input type="radio" id="a75" name="amount" checked="checked">$75</label>
    </li>
    <li>
        <label for="a100">
            <input type="radio" id="a100" name="amount">$100</label>
    </li>
    <li>
        <label for="other">
            <input type="radio" id="other" name="amount">other:
            <input type="text" id="otherAmount" name="numAmount">
        </label>
    </li>
</ul>

CSS

input[name=amount] {
    display:none
}
.donate-now {
    list-style-type:none;
    margin:25px 0 0 0;
    padding:0;
}
.donate-now li {
    float:left;
    margin:0 5px 0 0;
}
.donate-now label {
    padding:5px;
    cursor:pointer;
    -webkit-appearance: button;
    /* WebKit */
    -moz-appearance: button;
    /* Mozilla */
    -o-appearance: button;
    /* Opera */
    -ms-appearance: button;
    /* Internet Explorer */
    appearance: button;
    /* CSS3 */
}
.donate-now label:hover {
    background:#DDD;
}

JavaScript

$(':radio').on('change', function () {
    console.log(this.id);
});