Jquery Image Border on Radio Select

Question

I am trying to tie an border image to appear when you select a radio box. Here is the code:

<table width="100%">
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" id="option_img"><br><input class="optionVent" type="radio" name="vent" value="1">vent</td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" id="option_img"><br><input class="optionVent" type="radio" name="vent" value="1">vent</td>
                    </tr></table>

Here is the javascript:

$(".optionVent").click(function(){
    if($(this).is(':checked')){
        $("#option_img").css('border', "solid 1px orange"); 
    }  
});

As it stands now, when 1 box is selected, both images get borders. I can't figure out a way to tie the images to the radio selection box.

Thanks,

Answer 1

$(".optionVent").on('change', function(){
    $('img').css('border', 'none'); //add a class to be more specific
    $(this).closest('td').find('img').css('border', 'solid 1px orange'); 
});

Also, ID's are unique, you can only have one of each ID, not several.