title: Run one jQuery function on multiple elements with the same class
body: <p>I have problem with running one jquery function on two or more elements. It runs properly on the first element in the HTML code, but doesn't work properly on others.</p>
  
  <p>I have this jQuery:</p>
  
  <pre><code>$(window).load(function(){
  $('.background_square_1 li.bg_square').hide();
  
  function rotate() {
  $(".background_square_1 li.bg_square").first().appendTo('.background_square_1').fadeOut(500);
  $(".background_square_1 li.bg_square").first().fadeIn(500);
  
  setTimeout(rotate, 10000);
  }
  rotate();
  });
  </code></pre>
  
  <p>And HTML like this:</p>
  
  <pre><code>&lt;ul class="background_square_1 gallery_background"&gt;
  &lt;li class="bg_square bg_1"&gt;&lt;/li&gt;
  &lt;li class="bg_square bg_2"&gt;&lt;/li&gt;
  &lt;li class="bg_square bg_3"&gt;&lt;/li&gt;
  &lt;li class="bg_square bg_4"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul class="background_square_1 gallery_background"&gt;
  &lt;li class="bg_square bg_1"&gt;&lt;/li&gt;
  &lt;li class="bg_square bg_2"&gt;&lt;/li&gt;
  &lt;li class="bg_square bg_3"&gt;&lt;/li&gt;
  &lt;li class="bg_square bg_4"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Basically, what I am trying to achiveve is to run the function on both (but can be more!) ul elements with background_square_1 class.</p>
  
  <p>Truth be told, I do not work with javascript or jQuery, so please keep this in mind.</p>
  
  <p>Here is Fiddle showing my problem: <a href="http://fiddle.jshell.net/bWHPg/" rel="nofollow">http://fiddle.jshell.net/bWHPg/</a></p>