مشکل با این کد

[WithoutBrain1994 39]

سلام لطفا بگین مشکل این کد چیه

زمانی که روی تگ div کلیک میکنم فقط ایندکس 0 (صفر) اجرا میشه

$(document).ready(function() {
(function() {
$('.dd').hide();
$('.dt').on('click', function() {
	 var index = $( ".dt" ).index( this );
	 $(".ddd").children().eq(index).show().siblings(".dd").hide();

});
})();
});

در صورتی که اگه بجای توابع show و hide از تابع css استفاده کنم درست عمل میکنه. کد زیر

$(document).ready(function() {
(function() {
// $('.dd').hide();
$('.dt').on('click', function() {
	 var index = $( ".dt" ).index( this );
	 $(".ddd").children().eq(index).css("background-color", "red").siblings(".dd").css("background-color", "blue");

});
})();
});

اینم کد html

<div style="display:table-row;" class="dtt">
	 <div class="dt">Test</div>
	 <div class="dt">Test</div>
	 <div class="dt">Test</div>
	 <div class="dt">Test</div>
	 </div>
	 <div style="display:table-row;" class="ddd">
	 <div class="dd"><span>Test2</span></div>
	 <div class="dd"><span>Test2</span></div>
	 <div class="dd"><span>Test2</span></div>
	 <div class="dd"><span>Test2</span></div>
	 </div>

[imanfakhar 26231]

کدتون درسته متن ایندکساتون رو تغییر بدید که متوجه عمل کرد کد بشید

<div style="display:table-row;" class="dtt">
		 <div class="dt">Test</div>
		 <div class="dt">Test</div>
		 <div class="dt">Test</div>
		 <div class="dt">Test</div>
		 </div>
		 <div style="display:table-row;" class="ddd">
		 <div class="dd"><span>Test1</span></div>
		 <div class="dd"><span>Test2</span></div>
		 <div class="dd"><span>Test3</span></div>
		 <div class="dd"><span>Test4</span></div>
		 </div>

[WithoutBrain1994 39]

ممنون

حل شد