JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

$('#colorOptions tr').hover(function(){
    $("#color").attr({"src": $(this).data('img'), "alt": $(this).data('img')});
});