title: javascript function inside loop run only once
body: <p>I have a javascript function which is looping on my data basically I call another function inside of loop but it only execute once on last index here is my code and this function I wants to execute on every time.
    basically inside loop I call ajax that is run fine on each index of loop but issue is to call db.transaction function which is only execute on last index</p>
  
  <blockquote>
    <p>db.transaction(populateDB, errorCB);</p>
  </blockquote>
  
  <pre><code>function renderList(tx, results) {
     len = results.rows.length;
     console.log("rows" + results.rows.length);
     for (var i = 0; i &lt; len; i++) {
  
         (function (i) {
             var nid = results.rows.item(i).nId;
  
             $.ajax({
                  type: 'post',
                  url: 'http://localhost:50972/LibraryService.asmx/GetTitleSections',
                  dataType: 'json',
                  data: "{'MainSectionId':'" + nid + "'}",
                  contentType: 'application/json; charset=utf-8',
                  async: false , 
                  success: function (response) {
                      var data = response.d;
                      alert(data.nId);
                      TitleSectionData = data;
                  },
                  error: function (error) {
                      console.log(error);
                  }
             });   
             db.transaction(TblTitleSection, errorCB);
         }) 
         (i);
  
         //  htmlstring += '&lt;li&gt;' + results.rows.item(i).strTitle + '&lt;/li&gt;';
         // $('#resultList').append("&lt;li&gt;" + results.rows.item(i).strTitle + "&lt;/li&gt;");
         $('#'+i).append( results.rows.item(i).strTitle );
         // $('#tblMainSection').append("&lt;tr&gt;&lt;td&gt;" + results.rows.item(i).strTitle + "&lt;/td&gt;&lt;/tr&gt;");
     }
  
     // $('#resultList').html(htmlstring);
  }
  </code></pre>