JSFiddle - React, Tailwind, and code Playground

by Lucas Trzesniewski

HTML

<div class="gift-certificate-show-form">
    <p>Vem vill du skicka ditt presentkort till?</p>
    <ul class="show_hide_list" style="list-style-type: none;">
        <li>
            <input type="radio" id="hide_form" name="is_gift" value="no" checked="checked" />
            <label for="hide_form">
                Skicka presentkortet till mig!
            </label>
        </li>
        <li>
            <input type="radio" id="show_form" name="is_gift" value="yes" />
            <label for="show_form">
                Till någon annan!
            </label>
        </li>
    </ul>
</div>

CSS

.highlighted {
    background: beige !important;
}

JavaScript

$(function() {
    var updateHighlight = function() {
        $(".gift-certificate-show-form")
            .find("li")
                .removeClass("highlighted")
            .end()
            .find("li:has(:radio:checked)")
                .addClass("highlighted");
    };
    
    updateHighlight();
    $(".gift-certificate-show-form :radio").on("click", function() {
        updateHighlight();
    });
});