Javascript-форум - прямая связь ссылок и элементов при наведении

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - прямая связь ссылок и элементов при наведении (https://javascript.ru/forum/jquery/76233-pryamaya-svyaz-ssylok-i-ehlementov-pri-navedenii.html)

прямая связь ссылок и элементов при наведении

есть ссылки вида:

<a  href="#id1">1</a>
<a  href="#id2">2</a>
<a  href="#id3">3</a>
..........................
<a  href="#id9">9</a>

тут же рядом svg код

<a><path id="shop1" stroke="none" d="XXX"></path></a>
<a><path id="shop2" stroke="none" d="XXX"></path></a>
<a><path id="shop3" stroke="none" d="XXX"></path></a>
<a><path id="shop4" stroke="none" d="XXX"></path></a>

как сделать что при наведении например на ссылку #id1 к path id="shop1" присваивался class="active" а после отвода мышки убирался class="active".

Помогите пожалуйста.

<a href="#id1">1</a>
<a href="#id2">2</a>
<a href="#id3">3</a>
	
<a><path id="shop1" stroke="none" d="XXX"></path></a>
<a><path id="shop2" stroke="none" d="XXX"></path></a>
<a><path id="shop3" stroke="none" d="XXX"></path></a>
<script>
	
$('a[href^="#id"]').each(function(){
	$(this).hover(function(){
		$('#shop'+this.href.match(/\d+$/)).toggleClass('active');
	});
});
	
		</script>