Twitter Bootstrap Tabs Using foreach PHP

Twitter Bootstrap Tabs Using foreach PHP

I want make tabs with twitter bootstrap and data from database, I have php
code following :
<ul id="languages" class="nav nav-tabs">
<?php $i = 0; ?>
<?php foreach ($languages as $language) { ?>
<li class="<?php if ($i == 0) { echo 'active'; } ?>">
<a href="#language<?php echo $language['language_id']; ?>"
data-toggle="tab"><img src="view/image/flags/<?php echo
$language['image']; ?>" title="<?php echo $language['name'];
?>" /> <?php echo $language['name']; ?></a>
</li>
<?php $i++; } ?>
</ul>
<div id="languages" class="tab-content">
<?php $a = 0; ?>
<?php foreach ($languages as $language) { ?>
<div id="language<?php echo $language['language_id']; ?>"
class="tab-pane fade <?php if ($a == 0) { echo 'active'; } ?> in">
<?php echo $language['language_content']; ?>
</div>
<?php $a++; } ?>
</div>
First reload, language 1 is active tab

When click language 2's tab
link #language2 tag have selected class
div tag with id language2 have display block but not have active class
language 1 li still have active class but language 2 li have not active
class.

When I try copy html (via inspect element) and make on jsfiddle it's works
perfectly. Jsfiddle