Переключение классов по клику в двух блоках
 

Помогите плиз со скриптом, при такой структуре:

При загрузке страницы скриптом "одеваю" классы:
jQuery('#filter li a.eighteen').addClass("active");
jQuery('#block .one').addClass("visible");

Необходимо, чтобы по клику на <a> - активный класс переключался в фильтре и, соответственно visible в блоке.

Тег «div» нужно обязательно закрывать.

<ul id="filter">
    <li><a href="#" class="one active">1</a></li>
    <li><a href="#" class="two">2</a></li>
    <li><a href="#" class="three">3</a></li>
    <li><a href="#" class="four">4</a></li>
</ul>
 
<div id="block">
    <div class="one visible">one</div>
    <div class="one visible">one</div>
    <div class="one visible">one</div>
    <div class="two">two</div>
    <div class="two">two</div>
    <div class="two">two</div>
    <div class="three">three</div>
    <div class="three">three</div>
    <div class="three">three</div>
    <div class="four">four</div>
    <div class="four">four</div>
    <div class="four">four</div>
</div>

<style>
#filter .active {color: red}
#block > div {display: none;}
#block > div.visible{display: block;}
</style>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    var $filter = $('#filter'),
        $block = $('#block');

    $filter.on('click', 'a', function (e) {
        e.preventDefault();
        
        $filter.find('.active').removeClass('active');
        $block.find('.visible').removeClass('visible')
        $block.find('.' + this.className).addClass('visible');
        
        this.classList.add('active');
    });
</script>