Как правильно сделать удаление/появление элементов?

Question

[zuraavl]

У меня есть список

ul
  li.class1
  li.class2

при клике на переключатель я должен показывать только class1 или class2

у списка есть такие стили, что делает использование простого тогл класса невозможным
:nth-child(5n+5)
:nth-child(5n-1)
то есть 4-5 элементы видимого списка должны иметь особые стили.
Если скрыть видимость этих блоков, а не удалить их, то я не смогу правильно применить стили

Я использую следующий код и он работает, но когда я нажимаю на link1 а потом на link 2, а потом снова на link1, вместо того чтобы показывать элементы с нужным классом, мне показывает все элементы.
codepen

var divs;
    
    $('li').each(function(i){
    	$(this).data('initial-index', i);
      
    });
    
    $('.link1').on('click', function () {
      
    	if(divs) {
        	$(divs).appendTo('ul').each(function(){
                var oldIndex = $(this).data('initial-index');
                $('li').eq(oldIndex).before(this);
            });
            divs = null;
        } else {
            divs = $('.class1').detach();
        }
    });
 $('link2').on('click', function () {
     
    	if(divs) {
        	$(divs).appendTo('ul').each(function(){
                var oldIndex = $(this).data('initial-index');
                $('li').eq(oldIndex).before(this);
            });
            divs = null;
        } else {
            divs = $('.class2').detach();
        }
    });

Как сделать чтобы работало корректно? не шарю js (