Multiple carousels in Tabs

[albin]

I have a bunch of tabs, each tab should contain a carousel (e.g Tab1 to Carousel1, Tab2 to Carousel2 etc.) However only the first tab's carousel renders. I have tried everything from generating unique ids to using class selectors, still can't get it to work as desired. ThanksHtml with razor hooks\[code\]<div class="tabbable"> <ul id="myTab" class="nav nav-tabs"> @{int incs=0;} @foreach(var row in db.Query(queryCategory)) { <li><a href="http://stackoverflow.com/questions/13735851/#@row.Category_ID" data-toggle="tab">@row.Category_Name</a></li> } </ul> <div class="tab-content"> @{bool first = true;} @foreach(var row in db.Query(queryCategory)) { var ids= @row.Category_ID; <div class="@{if (first){<text>tab-pane active</text> first = false;}else{<text>tab-pane</text>}}" id=@ids> <p>I'm in @row.Category_Name.</p> <ul id="@("customselect"+@incs++)" class="elastislide-list carousel"> @foreach(var row1 in db.Query("SELECT * FROM Food WHERE Category_ID = @0", ids)) { <li><a href="http://stackoverflow.com/questions/13735851/@row1.Food_ID" class="link"> <div class="image-box"><img src="http://stackoverflow.com/questions/13735851/img/food.jpg"></div> <span>@row1.Food_Name</span> </a> </li> } </ul> </div> }</div><!--tabbable-->\[/code\]Jquery\[code\]$('.carousel').each(function(index) { $(this).elastislide();});\[/code\]