I have a little problem with JQuery

Hi all, I have a problem with JQuery and for iterator.
I will copy the code here:

for (i = 0; i < len; i++) {   
                $("#product").append('<div data-role="collapsible"><h4>' + results.rows.item(i).nome+ i +'</h4><p>' + results.rows.item(i).descrizione + '<a href="#popup" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">read more</a><button id="pianta">pianta</button></p></div><div data-role="popup" id="popup" class="ui-content" style="max-width:280px"><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><p> text' + i + '</p></div>');
            } 

Everything works as it should except the value of “i” when I print it within the popup.
the first time “i” is incremented correctly but within the popup it is always valid 0.

Solutions? I guess it’s something simple but I just can not understand it.
p.s I am using JQuery 1.8.0 and Jquery mobile 1.4.5

You have a function inside of a loop, which is something you should avoid. If you are going to do that though, try for ( let i = 0.... Also, you’re missing a space before the plus sign: results.rows.item(i).nome+.

thanks for the advice, unfortunately it does not work even declaring let instead of var.
The strange thing is that by printing here results.rows.item(i).nome+ i

i is incremented normally but here <p> text' + i + '</p>

it always remains zero.

Is there any better way to not declare the function within the for loop?

I’m using apache cordova. The complete code of the function is this:

 var db = window.sqlitePlugin.openDatabase({ name: "myDB.sqlite", location: "default" });
    db.transaction(function (transaction) {
        transaction.executeSql('SELECT * FROM prodotti', [], function (tx, results) {
            var len = results.rows.length, i;
            for (i = 0; i < len; i++) {   
                $("#product").append('<div data-role="collapsible"><h4>' + results.rows.item(i).nome+ i +'</h4><p>' + results.rows.item(i).descrizione + '<a href="#popup" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">leggi di più</a><button id="pianta">pianta</button></p></div><div data-role="popup" id="popup" class="ui-content" style="max-width:280px"><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><p id="prodotto"> text' + i + '</p></div>');
            }

            console.log("prodotti appesi");
        }, null);
    }); 

The console does not show any errors but if I print “i” in the console just before the loop is closed, “i” is printed correctly.
for popup I’m intending the jquery mobile popup widget

Thanks Randelldawson, the problem was precisely that of the univocal id.