javascript/json nested for and for/in loops in framework7 popups
<p>Hi all I hope someone can help Im a bit stuck single developer on own , with the below what im trying to do is nest for loops, I have data back at the var  = I; but not at the next two for statements, when the popup is called only the last record comes back I can see in console the data is there and the ids for the link and the data within do illicitate around , however only the last record appears I haven't uploaded the json because its a really long script any help on this would be very appreciated I have been playing with nested loops and got them to work just not in the bellow I normally use for/in apparently that's bad practice from what ive read up so changed to flat for loops.</p>

<pre><code>&lt;pre&gt;     $.getJSON('myurl', function (data) {
          console.log(data);

          var data = data.sponsor;
          var output = "";
          var myApp = new Framework7();
          var $$ = Dom7;
          output += "&lt;ul&gt;";

           for (var i = 0; i &lt; data.length; i++) {

                  output += "&lt;li class='list-block media-list sponsors list-block-search '&gt;";                     
                  output += "&lt;div class='item-media-auto'&gt;" + data[i].images + "&lt;/div&gt;"; //working
                  output += "&lt;div class='item-inner'&gt;";
                  output += "&lt;div class='item-title-row'&gt;";
                  output += " &lt;div id='name' class='item-title'&gt;" + data[i].title + data[i].id +"&lt;/div&gt;";
                  output += "&lt;/div&gt;";
                  output += "&lt;a href=" + data[i].custom['panaone_sponsorurl'] + " target='_blank'&gt;";
                  output +=  data[i].custom['panaone_sponsorurl'];
                  output += "&lt;/a&gt;";
                  output += ' &lt;p&gt;&lt;a href="#" class="create-popup' + data[i].id +'"&gt;Create Popup&lt;/a&gt;&lt;/p&gt;';
                  output += "&lt;/li&gt;";

                 document.getElementById("placeholder").innerHTML = output;
                 output += "&lt;/ul&gt;";  

             }

                 for (var l = 0; l &lt; data.length; l++) {
                    $$('.create-popup'+ data[l].id).on('click', function () {

                 for (var j = 1; j &lt; data.length; j++) {

                           var popupHTML = '&lt;div class="popup '+ data[j].id + '"&gt;'+
                                   '&lt;div class="content-block "&gt;'+
                                     '&lt;p&gt;Popup created dynamically.'+ data[j].id + '&lt;/p&gt;'+

                                     '&lt;p&gt;&lt;a href="#" class="close-popup"&gt;Close me&lt;/a&gt;&lt;/p&gt;'+
                                   '&lt;/div&gt;'+
                                 '&lt;/div&gt;'+

                 myApp.popup(popupHTML);
             }
        });  
    }
  });
 }                
    &lt;/pre&gt;                 
</code></pre>