[RodgerFox]

Доброй ночи, уважаемые пользователи форума. Столкнулся с задачкой, трудной для выполнения мне. Надеюсь она заинтересует тебя, и ты сможешь помочь мне решить её.
Есть список радио кнопок, каждая находится в своем li, при нажатии на другой инпут или лабел класс меняется на активный у li.
Если работать с одним списком <ul><li../><li.../></ul> То все отлично, а как быть если их больше? Подскажите пожалуйста, я сам не смогу додумать.
Сам код:

$(document).ready(function(){
    $('.variants input[type="radio"]').click(function() {
        console.log('li[for="' + $(this).attr('id') + '"');
        $('li').removeClass('radioOn').addClass('radioOff');

        $('li[for="' + $(this).attr('id') + '"]').removeClass('radioOff').addClass('radioOn'
)
    });

    $('.variants input[type="radio"]:checked').click();
});

(отлично работает если на странице один список(ul), с множеством вариантов (li) ).

Примерный html:

<article>
 <ul>
   <li for="id_1"><input type="radio" ... /><label .. /></li>
   <li for="id_2"><input type="radio" ... /><label .. /></li>
 </ul>
</article>
<article>
 <ul>
   <li for="id_53"><input type="radio" ... /><label .. /></li>
   <li for="id_54"><input type="radio" ... /><label .. /></li>
 </ul>
</article>
<article>
 <ul>
   <li for="id_86"><input type="radio" ... /><label .. /></li>
   <li for="id_87"><input type="radio" ... /><label .. /></li>
 </ul>
</article>

p.s. для каждого article может использовать еще свой уникальный индификатор?