JSFiddle - React, Tailwind, and code Playground

by rajaadil

HTML

<table>
    <tr>
        <td style="font-weight: 700" colspan="2">
            Color<input id="colorSortOrder" type="hidden" value="1" />
        </td>
    </tr>
    <tr>
        <td>
            <input id="radioRed" type="radio" name="Color" value="R-" />
            <label for="radioRed">
                Red</label>
            <input type="hidden" value="http://appleadayproject.files.wordpress.com/2011/03/apple-full2.jpg" />
        </td>
        <td rowspan="3">
            <img />
        </td>
    </tr>
    <tr>
        <td>
            <input id="radioOrange" type="radio" name="Color" value="O-" />
            <label for="radioOrange">
                Orange</label>
            <input type="hidden" value="http://www.crunchbase.com/assets/images/resized/0005/4061/54061v1-max-250x250.jpg" />
        </td>
        <td rowspan="3">
            <img />
        </td>
    </tr>
    <tr>
        <td>
            <input id="radioBlue" type="radio" name="Color" value="B-" />
            <label for="radioBlue">
                Blue</label>
            <input type="hidden" value="http://www.nyapplecountry.com/images/photosvarieties/redrome04.jpg" />
        </td>
        <td rowspan="3">
            <img />
        </td>
    </tr>
</table>

JavaScript

$('label[for]').closest('tr').mouseenter(function(){  
    $(this).siblings().find('img').hide();
    $(this).find('img').attr('src', $(this).find('input[type=hidden]').attr('value')).show(); 
});