JSFiddle - React, Tailwind, and code Playground

by Barry Margolin

HTML

<tr>
    <td colspan="2">
        <input type="radio" value="Direct Deposit" id="CAT_Custom_249152_0" name="CAT_Custom_249152"
        class="paymentmethod" /><strong>Direct Deposit</strong>

        <br />
        <input type="radio" value="Credit Card Authorisation" id="CAT_Custom_249152_1"
        class="paymentmethod" name="CAT_Custom_249152" /><strong>Credit Card Authorisation</strong>

        <br />
        <input type="radio" value="Cash at FAA Office (In Person)" id="CAT_Custom_249152_2"
        class="paymentmethod" name="CAT_Custom_249152" /><strong>Cash at Office (In Person)</strong>

    </td>
    <td>
        <div class="paymentinfo" id="pay0">
            <p style="padding-left: 40px;">BSB: 000 000
                <br />Acc: 00000000
                <br />Bank: xxx
                <br />Branch: xxxxxx, xxxxxx
                <br /> <span style="color: #ff0000;">Ref: Your Surname</span>

            </p>
        </div>
        <div style="margin-left: 40px;" class="paymentinfo" id="pay1">
            <table>
                <tbody>
                    <tr>
                        <td>
                            <label for="CardName">Name on Card <span class="req">*</span>

                            </label>
                            <br />
                            <input type="text" name="CardName" id="CardName" class="cat_textbox" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="CardNumber">Card Number <span class="req">*</span>

                            </label>
                            <br />
                            <input type="text" name="CardNumber" id="CardNumber" class="cat_textbox"
                            />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>Card Expiry <span class="req">*</span>

                           ...

CSS

.paymentinfo {
    display: none;
}

JavaScript

$(document).ready(function () {
    $(".paymentmethod").click(function () {
        $(".paymentinfo").hide();
        switch ($(this).val()) {
            case "Direct Deposit":
                $("#pay0").show("slow");
                break;
            case "Credit Card Authorisation":
                $("#pay1").show("slow");
                break;
            case "Cash at FAA Office (In Person)":
                $("#pay2").show("slow");
                break;
        }
    });
});