jQuery toggle radio/parent style will also toggle neighboring radios of different names

Question

To first give you an idea of what my HTML is like, I have a page with 3 groups of radio buttons, each group of radios is named by their container (ie. Page1, Page2, Page3). So the first group of radios all share the name "page1" and the second share the name "page2", etc.

So I'm using jQuery to toggle radio buttons and the class of the containing table for that radio (ie. addClass, removeClass on toggle). The toggle works fine, and so does the adding and removing of the class on the toggle. My problem is if I have a radio from page2 or page3 selected and then select/reselect a page1 radio, the jQuery will remove the class of the page2 and page3 checked radios styles.

Here is a link to the JSfiddle Demo.

And heres a look at the jQuery I'm using.

$(function() {

$('table').click(function(event) {
    $(this).closest('.container').addClass('selected').parent().siblings().each(function() {
        $(this).find('.container').removeClass('selected');
    });

    if(event.target.type != "radio") {

        var that = $(this).find('input:radio');

        that.attr('checked', !that.is(':checked'));

        if (that.is(':checked'))  {
        that.closest('table').addClass('selected');
    }
   else {
        that.closest('table').removeClass('selected');
}
    }
});
});

Answer 1

the .parent().siblings() is picking up the other pages because you don't have a div around page 1 if you add that it solves the problem http://jsfiddle.net/5YnBq/1/