Infinite Scroll Problem

Hello everyone,
I am trying to add infinite scroll on two different tab pages.
My first tab page is called today and infinite scroll works fine.

But when I want to add infinite scroll to another tab, it doesn’t work.
My codes are below.

https://jsfiddle.net/ou1apyw8/1/

Update: I guess I see the problem. My first infinite scroll has infinite-scroll-content class. Like below.

$$('.infinite-scroll-content').on('infinite', function () {

And when I want to change the class name, it doesn’t work. Then I looked at the framework7.min.js file. It has infinite-scroll-content class. Like below:

     on:{tabMounted:function(e){
 `var t=this;$$1(e).find(".infinite-scroll-content").each(function(e,a){t.infiniteScroll.create(a)})}`

But I don’t know how can I add another class to this js file

hi, your code shows a php call to db. this is not way to share your code. Please update your code to something real where people can actually see what you are trying to do.

I edited. Can you look again?

ok, so you just removed the php part.

what i meant was to make a fully functional jsfiddle with your error/code

you can take this jsfiddle as base. note that it already has f7 js + css + markup, you need remove what you dont need. Then add your code, the tabs with infinite scroll.

jsfiddle - Use ME as base