Why content in one of tab just won't show up? (version 3.6.2)

Hi, i am using the framework7 Tab components, and each tab , i am looping products and group by my product category on each tab , i have created 3 tabs, where , there are contents in other tabs than the one which is active-tab ,

refer to the image ,

this show that the first active tab

the above image show the second tab , which is now selected and active, if we see the console , element tab and in fact the tab has one(1) row which has 4 items , that
i check from the console .

the image show that the element structure of the 1st active tab which is the same
as the rest of the tab.

and the image above show that the 2rd active tab , which the element show that the content of the active tab has 1 row, which there are 4 items in that row ,

and the tab is working , when i check on the tabs switching by clicking on it ,the only things that i need advice is that , why wasn’t the 2rd tab when it active , it will show the content ?

all above code is generate dynamically when my web application is loading the page.

Локализуйте проблему, сделайте самый минимальный пример того, что “не работает”.