Data not being displayed in tabs - php

Question

I am displaying data from database which is linked to CMS. The problem I get is data from only one of my tabs is being displayed. Suppose I have two tabs, Tab 1, Tab 2. Instead of Tab 1 being active, Tab 2 is active and data is displayed of Tab 2. But, when I click on Tab 1, no data with respect to Tab 1 is displayed. The same data is present i.e Tab 2 data.
I am using mapping to get the ids of respective Tab.
<ul class="tabs" data-tab>
<?php
if(isset($X['list_by_parent_id'][0]) && !empty($X['list_by_parent_id'][0]))
{
$top_category_index=1;
foreach ($X['list_by_parent_id'][0] as $category_id)
{
?>
<li class="tab-title <?php if($top_category_index==1){ echo "active"; }?>"><?php echo $SITE['tmp']['product_categories'][$category_id] ?></li>
<?php
}
}
?>
</ul>
X is a global variable which is an array and stores everything.
This is the code that does mapping and displays the content.
<div class="category-content">
<div class="menu-cat-content tabs-content">
<?php if(isset($SITE['category_list_by_parent_id'][0]) && !empty($SITE['category_list_by_parent_id'][0]))
{
$top_category_index_mapped=1;
foreach ($SITE['category_list_by_parent_id'][0] as $category_id)
{ ?>
<div id="category-<?php echo $top_category_index_mapped; ?>" class="content <?php if($top_category_index_mapped++==1) { ?>active<?php } ?>">
//code for content
</div>
Rendered HTML:
<div class="category-content">
<div class="menu-cat-content tabs-content">
<div id="category-1" class="content active">
<!--sub category 1-->
</div><!--sub-category-clearfix2-->
<!--sub category 2 ends-->
</div> <!--category-div, index_mapped -->
<div id="category-2" class="content active">
<!--sub category 1-->
</div><!--sub-category-clearfix2-->
<!--sub category 2 ends-->
</div> <!--category-div, index_mapped -->
<div id="category-3" class="content active">
EDIT: I saw that top_category_index_mapped was set to 1 in category-*top_category_index_mapped. I replaced it and rendered html now looks like this.

Answer 1

This line:
$top_category_index=1;
sets the $top_category_index to 1 for the first tab. This line:
<li class="tab-title <?php if($top_category_index==1){ echo "active"; }?>
is equal to this the firs two times:
<li class="tab-title active">
because of the properties of the ++ operator. Read more here.
For example:
$a = 5;
echo "Should be 5: " . $a++ . "<br />\n";
echo "Should be 6: " . $a . "<br />\n";
Since you've only tested with two tabs it seems, that's why you are getting those results. It might also be helpful to include the rendered html.