JSFiddle - React, Tailwind, and code Playground

by bmarsh123

HTML

<table class="steps_choose_pack" id="steps_domain_email">
    <tr style="float:left;" id="tr_ess" class="trt essential_tr">
        <td class="step2_tab_1" id="step2_domain_ess"><input type="radio" class="myRadio" name="field" value="essential" onclick= "showHide(['hide_steps_domain_01'],[],1);"/></td>
        <td class="step2_tab_2"><strong>Essential:</strong>Domain</td>
        <td class="step2_tab_3">Qty: <select></select> </td>
        <td class="step2_tab_4">Unit Price:<strong> &pound;28</strong> Annually</td>
            <td class="step2_tab_5"><a href=""><img class="question_mark" src="<?=base_url();?>images/question_mark.png"/></a></td>
    </tr>

    <tr style="float:left;" id="tr_clss" class="trt classic_tr">
        <td class="step2_tab_1" id="step2_domain_class"><input type="radio" class="myRadio" name="field" value="classic" onclick= "showHide(['hide_steps_domain02_01'],[],1);"/></td>
        <td class="step2_tab_2"><strong>Classic:</strong>Domain &amp; Business email</td>
        <td class="step2_tab_3">Qty: <select></select> </td>
        <td class="step2_tab_4">Unit Price:<strong> &pound;52</strong> Annually</td>
        <td class="step2_tab_5"><a href=""><img class="question_mark" src="<?=base_url();?>images/question_mark.png"/></a></td>
    </tr>
    
    <tr style="float:left;" id="tr_prm" class="trt premier_tr">
        <td class="step2_tab_1" id="step2_domain_prm"><input type="radio" class="myRadio" name="field" value="premier"/></td>
        <td class="step2_tab_2"><strong>Premier:</strong>Domain, business email &amp; hosting</td>
        <td class="step2_tab_3">Qty: <select></select> </td>
        <td class="step2_tab_4">Unit Price:<strong> &pound;279</strong> Annually</td>
            <td class="step2_tab_5"><a href=""><img class="question_mark" src="<?=base_url();?>images/question_mark.png"/></a></td>
    </tr>
</table>

CSS

.step_active_ess {
    background-color: gray;
}
.step_active_class {
    background-color: red;
}
.step_active_prm {
    background-color: blue;
}
tr:hover {
    background-color: gray;
}

JavaScript

$(document).ready(function(){
    $('.trt').click(function() {
        $('.trt').not($(this)).removeClass('step_active_ess');
        $(this).toggleClass('step_active_ess');
    });
});