jQuery toggle radio / parent style также будет переключать соседние радиостанции с разными именами

Чтобы сначала дать вам представление о том, на что похож мой HTML, у меня есть страница с 3 группами переключателей, каждая группа радиостанций названа по своему контейнеру (например, Page1, Page2, Page3). Таким образом, первая группа радиостанций имеет общее имя «page1», а вторая - «page2» и т. Д.

Поэтому я использую jQuery для переключения переключателей и класса таблицы, содержащей этот переключатель (например, addClass, removeClass для переключения). Переключатель работает нормально, как и добавление и удаление класса на переключателе. Моя проблема в том, что если у меня выбрано радио со страницы 2 или страницы 3, а затем я выбираю / повторно выбираю радио страницы 1, jQuery удалит класс стилей проверенных радио страницы 2 и страница 3.

Вот ссылка на демонстрацию JSfiddle.

И вот посмотрите на jQuery, который я использую.

$(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');
}
    }
});
});