JSFiddle - React, Tailwind, and code Playground

HTML

<table class="radio">
    <tbody>
        <tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="payu" id="payu" checked="checked">
            </td>
            <td>
                <label for="payu">
                    <h3 class="checkout_beautify"><b>PAYU MONEY -  (Credit/Debit/NetBanking)</b></h3>
                </label>
            </td>
            <td></td>
        </tr>
        <tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="icicipg" id="icicipg">
            </td>
            <td>
                <label for="icicipg">ICICI PAYMENT GATEWAY - (Credit/Debit)</label>
            </td>
            <td></td>
        </tr>
        <tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="citrus" id="citrus">
            </td>
            <td>
                <label for="citrus">
                    <h3 class="checkout_beautify"><b>CITRUS - (Netbanking)</b></h3>
                </label>
            </td>
            <td></td>
        </tr>
        <tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="bank_transfer" id="bank_transfer">
            </td>
            <td>
                <label for="bank_transfer">
                    <h3><b>DEPOSIT IN BANK</b></h3>
                </label>
            </td>
            <td></td>
        </tr>
    </tbody>
</table>

CSS

.checkout_beautify {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    transition: all 400ms;
    border-radius: 25px;
    text-align: center;
}
.checkout_beautify:hover {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    border-radius: 25px 4px 25px 4px;
    background: #1B1B1B;
    color: #ffffff;
    transition: all 4ms;
    text-align: center;
}
label[for=bank_transfer]:hover {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    border-radius: 25px 4px 25px 4px;
    background: #1B1B1B;
    color: #ffffff;
    transition: all 4ms;
    text-align: center;
}
label[for=icicipg]:hover {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    border-radius: 25px 4px 25px 4px;
    background: #1B1B1B;
    color: #ffffff;
    transition: all 4ms;
    text-align: center;
}
/*I TRIED*/

.radio_pink * {
    background: pink;
}

JavaScript

$(document).ready(function(){
$(".radio input[type=radio]:checked").closest('td').next().addClass('radio_pink');
    
var $radio = $('.radio input[type="radio"]');
    
$radio.click(function() {
    $radio.each(function() {
        $(this).closest('td').next().toggleClass('radio_pink', this.checked);
    });
});
});