jQuery - ограничение выбора на столбец и всего

Question

Я создаю пользовательский селектор продуктов, где пользователю предоставляется несколько вариантов в нескольких категориях.

Я бы хотел иметь возможность ограничить выбор до 3 для каждой категории, но 7 для всех .

Несколько категорий разделяются как <ul> с опциями, перечисленными в.

Когда пользователь выбирает опцию, класс 'active' добавляется к <li>.

Я использовал length, чтобы определить при клике, сколько активных классов установлено в общей сложности, но как бы я настроил это так, чтобы он предупреждал о более чем 3 для каждой категории категории и более чем 7 в целом?

$('#step-1 li').click(function(){

    $(this).addClass('active');

    var active_total = $('#step-1 li.active').length;

    if(active_total > 7) {
        alert('No more than 7 items in total.');
    }

})