JSFiddle - React, Tailwind, and code Playground

by amwz

HTML

<fieldset>
    <legend>Configure your package</legend>
    <div id="ctl00_ContentPlaceHolder_Content_Wraper_PackageOptions_UpdatePanel_PackageOptions">
        <div id="ctl00_ContentPlaceHolder_Content_Wraper_PackageOptions_Panel_PackageOptions" class="form-row group valid">
            <div style="max-height: 10px;"> <span class="FBEnabled" id="ctl00_ContentPlaceHolder_Content_Wraper_PackageOptions_EclipseValidator_Package" style="color:Red;"></span>
                <div class="inline-feedback" style="visibility: visible;">
                    <div class="inline-feedback-content">
                        <div class="arrow"></div><span id="ctl00_ContentPlaceHolder_Content_Wraper_PackageOptions_EclipseValidator_Package_TextLabel"></span>

                    </div>
                </div>
            </div>
            <div class="textbox-group-row lbl-pad"> <span id="ctl00_ContentPlaceHolder_Content_Wraper_PackageOptions_Label2">
                            Please choose a package to begin customising your PSTN line.
                        </span>

            </div>
            <div class="radio-group-row">
                <input type="hidden" name="ctl00$ContentPlaceHolder_Content_Wraper$PackageOptions$HF_Package" id="HF_Package" value="E/CS/PSTN_P1" /> <span id="ctl00_ContentPlaceHolder_Content_Wraper_PackageOptions_Repeater_CallPackage_ctl00_Label1" title="E/CS/PSTN_P1">
                                    <div class="package-container" id='E/CS/PSTN_P1'>
                                        <div class="package-title">Free Evening &amp Weekends</div>
                                        <div class="package-body">
                                            <h4>£12.99</h4>
                                            <p>1000 FREE minutes every month (to UK landline 01, 02 &amp 03 numbers)</p>
                                        </div>
                                        <div class="package-footer">
                                           ...

CSS

.highlight {
    background-color: #ff9900;
}
.highlight-border {
    border-color: #ff9900;
}
/* style for package selection */
 .package-container {
    display: inline-block;
    background-color: #fff;
    margin-left: 1%;
    float: left;
    width: 32%;
}
.package-title {
    text-align: center;
    font-size: 13px;
    color: #fff;
    height: 40px;
    background-color: #303030;
    padding-top: 20px
}
.package-body {
    text-align: center;
    color: #666;
    height: 145px;
    padding-top: 10%;
    background-color: #f2f2f2;
}
.package-footer {
    text-align: center;
    height: 25px;
    background-color: #303030;
    padding-top: 15px;
}
.highlight {
    background-color: #ff9900;
}

.padding-top {
    padding-top: 20px;
}
.lbl-pad {
    padding: 15px;
}

JavaScript

$(document).ready(function () {
    var currPackage = $("#HF_Package").val();

    $("#" + currPackage).closest('.radio-group-row').find('.package-title').removeClass('highlight');
    $("#" + currPackage).closest('.radio-group-row').find('.package-footer').removeClass('highlight');
    $("#" + currPackage).find('input:radio').prop('checked', true);
    $("#" + currPackage).find('.package-title').addClass('highlight');
    $("#" + currPackage).find('.package-footer').addClass('highlight');
});