Executar função no evento do scroll de uma div

Programação
, , ,
#1

Tenho duas divs, as duas possuem o mesmo id="target1". Preciso pegar as duas divs no JavaScript e aplicar uma função no evento do scroll da div1. Essa função será responsável por pegar o valor do scroll da div1 e aplicar no scroll da div2. O resultado final seria scrollar a div1 e a div2 scrollar igualmente acompanhando a div1.

Eu consegui fazer funcionar tendo os ids diferentes, com target1 e target2.

function scrollSincronizado(){
	$( "#target1" ).scroll(function() {
		$("#target2").animate(
		{
			scrollTop: $("#target1").scrollTop()+"px"
		}, 0);
	});
}

Mas como preciso considerar que as duas divs possuem o mesmo id, então cheguei nesse ponto:

function scrollSincronizado(){
	var array = $('*[id*=target1]'); //Retorna um array com todos elementos com o id target1
	var t1 = array[0];
	var t2 = array[1];
	
	//no console imprime o elemento com os dados completo
	console.log(t1);
	console.log(t2); 
	
	//nao executa a funcao no scroll da div, porque?
	t1.scroll(function() {
		console.log("entrou na funcao");
		t2.animate({scrollTop: t1.scrollTop()+"px"}, 0);
	});
}

Esse é o HTML em que estou testando:

<html>
  <head>
    <meta charset="utf-8">
  </head>

  <body>
		
	<div id="123">
  	<div id="target1" onscroll="scrollSincronizado()" style="overflow: scroll; width: 200px; height: 100px;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</div>
	</div>

<div id="456">
  <div id="target1" style="overflow: scroll; width: 200px; height: 100px;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>
		
	</body>

</html>
#2

Consegui resolver. O problema era que não coloquei o $ para o reconhecer no jQuery.
Então ficou assim:

$(t1).scroll(function() {
	$(t2).animate({scrollTop: $(t1).scrollTop()+"px"}, 0);
});

Outra opção para resolver esse problema seria:

$(t1).scroll(function() {
	t2.scrollTo(0, $(t1).scrollTop());
});