Problemas com mouseenter() e mouseleave()

Preciso de ajuda com esse código, quando passo o mouse no link com classe .show_post no primeiro link ele abre a div com classe .post-prev, mas quando passo mouse no segundo link ele abre as duas classes .post-prev e .post-next, mas o correto seria cada link exibir sua respective div.

Para ser mais direto segue o jsfiddle: http://jsfiddle.net/pabloworks/m4q6B/

HTML

<a href="#" class="btn-abs prev-new hide show_post" data-id="1">◄</a>

 <div class="post-prev content-show" id="1">
 <a href="#">
 <span>titulo 01</span>
 </a>
 </div>

<a href="#" class="btn-abs next-new hide show_post" data-id="2"><span>►</span></a>

 <div class="post-next content-show" id="2">
 <a href="#">
 <span>titulo 02</span>
 </a>
 </div>Js 

 

$(function(){
$(".post-prev, .post-next").hide();
 var id;

 $('.show_post').mouseenter(function(){
 id = '.post-prev, .post-next #'+$(this).data("id");

 console.log(id); //verificando o id de quem disparou o evento

 $(id).stop().fadeIn('fast');
 })

 .mouseleave(function(){
 $(id).fadeOut('fast');
 });
});