title: JQuery/Ajax calls in a For Loop
body: <p>Is it possible to put <code>("xxxxx").html(data)</code> in a for loop where the "xxxx" variable changes each time?</p>
  
  <p>I honestly feel like I've tried everything. I'm trying to fill up an HTML table with JSONP data from a looping ajax call where the URL changes each time.  The same callback function is used every time, but, obviously, I keep overwriting the data that is to be sent to the HTML table tags because I can't figure out a way to dynamically change these variables.</p>
  
  <p>Basically, I want the first time the callback function is called to store data in something like...</p>
  
  <pre><code>$("#p1_points").html(data_from_ajax_call)
  </code></pre>
  
  <p>The second time I want it to do...</p>
  
  <pre><code>$("#p2_points").html(data_from_ajax_call)
  </code></pre>
  
  <p>I've tried silly things like (inside a for loop) doing ...</p>
  
  <pre><code>$("#p" + i + "_points").html(data_from_ajax_call)
  </code></pre>
  
  <p>and all sorts of fun stuff, but it doesn't accept arguments of any kind...  So, any thoughts?  Is this trivial and I'm just over-thinking and under-sleeping it?</p>
  
  <p>Thanks in advance for any help.</p>
  
  <p>UPDATING FOR CLARITY</p>
  
  <p>My ajax calls look like this...</p>
  
  <pre><code>for (var i = 0; i &lt; thisweeksraiders.length; i++){
      $.ajax({
          "url":"http://us.battle.net/api/wow/character/aerie-peak/" + thisweeksraiders[i] + "?jsonp=myCallback",
          "type":"GET",
          "data": { fields: "items, professions, talents, progression"},
          "dataType":"jsonp",
          "contentType":"application/json",
          "jsonpCallback":"myCallback",
          "success":function(data1){
          }
      })
  }
  </code></pre>
  
  <p>and my callback function looks like this...</p>
  
  <pre><code>function myCallback(data1) {
          //itemscounter += 1;
          var hascloak = "No";
          var possupgrades = 30;
          var offhandequipped = false;
          var tempupgrades = 0;
          var tierequipped = 0;
          for (var i = 0; i &lt; gearlist.length; i++){
              if (data1.items[(gearlist[i])].tooltipParams.upgrade)
                  tempupgrades += data1.items[(gearlist[i])].tooltipParams.upgrade.current;
          }
          for (var i = 0; i &lt; tierlist.length; i++){
              if(data1.items[(tierlist[i])].tooltipParams.set)
                  tierequipped += 1;
          }
          if (data1.items.offHand){
              tempupgrades += data1.items.offHand.tooltipParams.upgrade.current;
              offhandequipped = true;
          }
          if (offhandequipped)
              possupgrades = 32;
          if(data1.items[(gearlist[3])].quality == 5)
              hascloak = "Yes";
          $("#p1_cloak").html(hascloak);
          $("#p1_tier").html(tierequipped + "/5");
          $("#p1_achieve").html(data1.achievementPoints);
          $("#p1_iLevelE").html(data1.items.averageItemLevelEquipped);
          $("#p1_upgrades").html(tempupgrades + "/" + possupgrades);
          var totalnormalkills = 0;
          var totalheroickills = 0;
          var furthestboss = null;
          for (var i = 0; i &lt; soobosslist.length; i++){
              totalnormalkills += data1.progression.raids[31].bosses[i].normalKills;
              totalheroickills += data1.progression.raids[31].bosses[i].heroicKills;
          }
          if (totalheroickills == 0){
              for (var i = 14; i &gt; 0; i--){
                  if (data1.progression.raids[31].bosses[i-1].normalKills &gt; 0){
                      furthestboss = i + "N";
                      break;
                  }
              }
          }
          else {
              for (var i = 14; i &gt; 0; i--){
                  if (data1.progression.raids[31].bosses[i-1].heroicKills &gt; 0){
                      furthestboss = i + "H";
                      break;
                  }
              }
          }
          $("#p1_normalkills").html(totalnormalkills);
          $("#p1_heroickills").html(totalheroickills);
          $("#p1_xp").html(furthestboss);
          var classtemp;
          var colortemp;
          switch(data1.class){
          case 1: classtemp = "Warrior"; colortemp = "#C79C6E"; break;
          case 2: classtemp = "Paladin"; colortemp = "#F58CBA"; break;
          case 3: classtemp = "Hunter"; colortemp = "#ABD473"; break;
          case 4: classtemp = "Rogue"; colortemp = "#FFF569"; break;
          case 5: classtemp = "Priest"; colortemp = "#FFFFFF"; break;
          case 6: classtemp = "Death Knight"; colortemp = "#C41F3B"; break;
          case 7: classtemp = "Shaman"; colortemp = "#0070DE"; break;
          case 8: classtemp = "Mage"; colortemp = "#69CCF0"; break;
          case 9: classtemp = "Warlock"; colortemp = "#9482C9"; break;
          case 10: classtemp = "Monk"; colortemp = "#00FF96"; break;
          case 11: classtemp = "Druid"; colortemp = "#FF7D0A"; break;
          }
          $("#p1_classspec").html("&lt;font color=" + colortemp + "&gt;&lt;b&gt;" + data1.name + "&lt;/b&gt;&lt;/font&gt;&lt;font size='-1' color=" + colortemp + "&gt;&lt;em&gt; (" + data1.talents[0].spec.name + ")&lt;/em&gt;&lt;/font&gt;");
          var profstemp = (data1.professions.primary[0].name + " &amp; " + data1.professions.primary[1].name);
          $("#p1_profs").html(profstemp);
      }
  </code></pre>
  
  <p>So, basically, all the #p1 stuff I could put at the end of the function, but I'd like to change it all to $p2 to fill in the next row on my table.  The HTML should be obvious, but here it is...</p>
  
  <pre><code>&lt;body&gt;
  &lt;center&gt;
  &lt;table width="100%" border="0"&gt;
    &lt;tr&gt;
      &lt;td id="p1_classspec"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p1_iLevelE"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p1_upgrades"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p1_cloak"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p1_tier"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p1_profs"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p1_achieve"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p1_normalkills"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p1_heroickills"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p1_xp"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td id="p2_classspec"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p2_iLevelE"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p2_upgrades"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p2_cloak"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p2_tier"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p2_profs"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p2_achieve"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p2_normalkills"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p2_heroickills"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p2_xp"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td id="p3_classspec"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p3_iLevelE"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p3_upgrades"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p3_cloak"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p3_tier"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p3_profs"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p3_achieve"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p3_normalkills"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p3_heroickills"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td id="p3_xp"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/center&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>If you follow this link, you'll see what I'm going for (this is not using the for loop).  I just want to drastically cut down on my code.</p>
  
  <p><a href="http://www.mynextbit.com/Pages/Wreckedified/test2.html" rel="nofollow noreferrer">http://www.mynextbit.com/Pages/Wreckedified/test2.html</a></p>
  
  <p>One more Update for Patrick... </p>
  
  <pre><code>$(document).ready(function(){
          for (var i = 0; i &lt; thisweeksraiders.length; i++){
              (function(index)
                  window.jsonpCallbacks["myCallback" + index] = function(data){
                      myCallback(data,index);
                  };
          })(i);
              $.ajax({
                  "url":"http://us.battle.net/api/wow/character/aerie-peak/" + thisweeksraiders[i] + "?jsonp=jsonpCallbacks.myCallback" + i,
                  "type":"GET",
                  "data": { fields: "items, professions, talents, progression"},
                  "dataType":"jsonp",
                  "contentType":"application/json",
                  "jsonpCallback":"jsonpCallbacks.myCallback"+i,
                  "success":function(data1){
                  }
              })
          }
  
      });
  </code></pre>