jQueryで複数ﾀﾌﾞの独自起動について同じｸﾗｽ名で複数のﾀﾌﾞを設置したのですが､ﾎﾞﾀﾝを押すと全部のﾀﾌﾞが同時に動いてしまいます｡独立した動きにするにはeachとか…

jQueryで複数ﾀﾌﾞの独自起動について

同じｸﾗｽ名で複数のﾀﾌﾞを設置したのですが､ﾎﾞﾀﾝを押すと全部のﾀﾌﾞが同時に動いてしまいます｡
独立した動きにするにはeachとか使えば出来るのかと思ったのですが､いまいち思うように動きません｡ｱﾄﾞﾊﾞｲｽ頂きたいです｡

下のHTMLｺｰﾄﾞで量産しています｡

$(function(){
$('.tab02 > li').click(function() {
var index = $('.tab02 > li').index(this);
$('.tab_current02 > li').removeClass('current02');
$('.tab_current02 > li').eq(index).addClass('current02')
$('.tab02 > li').removeClass('current02');
$(this).addClass('current02');
return false;
});
});

<div class="kukaku sanko">

<div class="tab_detail02">
<ul class="tab_current02">
<li class="current02"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="tab_content02">
<ul class="tab02">
<li class="current02"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>

こういう感じでできますが､ﾊﾞｸﾞの温床になりそうな……

$('.kukaku').each(function(){
var target = $(this);
 $('.tab02 > li', target).click(function() {
 var index = $('.tab02 > li', target).index(this);
 $('.tab_current02 > li', target).removeClass('current02');
 $('.tab_current02 > li', target).eq(index).addClass('current02')
 $('.tab02 > li', target).removeClass('current02');
 $(this).addClass('current02');
 return false;
 });
});

http://jsfiddle.net/hcubf7a4/