title: Why aren't div backgrounds updated in a loop after the first one?
body: <p>I am calling a function to set the backgrounds of several container divs to previously uploaded images. I use Ajax to get back a list (data) of image names and on success, I try to set the background of each div to the correct image. The data received is correct and the alert pops up 12 times with the correct values each time - however, only the first div background is actually set.</p>
  
  <pre><code>success: function(data) {
          var images = data.split(',');
          var i = 0;
          for(i = 0; i &lt; 12; i++){
              $("#mm"+(i+1).toString()).css('background-image', 'url(uploads/'+images[i]+')');
              $("#mm"+(i+1).toString()).css('background-size', '100%');
              alert("set #mm"+(i+1).toString()+" "+images[i]);
          }
      }
  </code></pre>
  
  <p>Is this something to do with Ajax or am I missing something very simple? It seems to me the code above should work...I have checked developer tools and there are no errors, I have checked the file are all in the correct place and accessible, and I have checked the tomcat logs and all seems fine..</p>
  
  <p>I have also tried unrolling the loop but the result is the same - only the first image is loaded:</p>
  
  <pre><code>$("#mm1").css('background-image', 'url(uploads/'+images[0]+')');
                               $("#mm1").css('background-size', '100%');
                               $("#mm2").css('background-image', 'url(uploads/'+images[1]+')');
                               $("#mm2").css('background-size', '100%');
                               $("#mm3").css('background-image', 'url(uploads/'+images[2]+')');
                               $("#mm3").css('background-size', '100%');
                               $("#mm4").css('background-image', 'url(uploads/'+images[3]+')');
                               $("#mm4").css('background-size', '100%');
                               $("#mm5").css('background-image', 'url(uploads/'+images[4]+')');
                               $("#mm5").css('background-size', '100%');
                               $("#mm6").css('background-image', 'url(uploads/'+images[5]+')');
                               $("#mm6").css('background-size', '100%');
                               $("#mm7").css('background-image', 'url(uploads/'+images[6]+')');
                               $("#mm7").css('background-size', '100%');
  </code></pre>
  
  <p>The HTML code is as follows (there are 12 in total):</p>
  
  <p><li></p>
  
  <pre><code>                        &lt;div id="uploadsContainer" class="mm1Container"&gt;
                              &lt;div id="mm1" class="mm1 card front face"&gt;
                                  &lt;form id="mm1Form" method="post" enctype="multipart/form-data"  action="imageUploadForm.jsp"&gt;
                                      &lt;input type="hidden" name="mm" value="mm1" /&gt;
                                      &lt;input class="uploads" type="file" name="image" id="image1" value="mm1"/&gt;
                                      &lt;input type="submit" class="btn" value="Upload File"/&gt;
                                  &lt;/form&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;div id="uploadsContainer" class="mm2Container"&gt;
                              &lt;div id="mm2" class="mm2 card front face"&gt;
                                  &lt;form id="mm2Form" method="post" enctype="multipart/form-data"  action="imageUploadForm.jsp"&gt;
                                      &lt;input type="hidden" name="mm" value="mm2" /&gt;
                                      &lt;input class="uploads" type="file" name="image" id="image2" value="mm2"/&gt;
                                      &lt;input type="submit" class="btn" value="Upload File"/&gt;
                                  &lt;/form&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;div id="uploadsContainer" class="mm3Container"&gt;
                              &lt;div id="mm3" class="mm3 card front face"&gt;
                                  &lt;form id="mm3Form" method="post" enctype="multipart/form-data"  action="imageUploadForm.jsp"&gt;
                                      &lt;input type="hidden" name="mm" value="mm3" /&gt;
                                      &lt;input class="uploads" type="file" name="image" id="image3" value="mm3"/&gt;
                                      &lt;input type="submit" class="btn" value="Upload File"/&gt;
                                  &lt;/form&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
  </code></pre>
  
  <p>The response data from Ajax is html form and is a comma separated list of image names:</p>
  
  <pre><code>IMG00808-20120824-1820.jpg, 860296_10151614864350672_1992010847_o.jpg, gentidona.jpg, 4220961.JPG, 4220961.JPG, 4220961.JPG, 40433_422126195671_675790671_5399343_5684255_n.jpg, mum.jpg, IMG_5500.JPG, IMG00817-20120824-1826.jpg, 4220961.JPG, IMG00019-20110219-1844.jpg
  </code></pre>