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>