title: Ajax 404 (Not Found) Looping through a loop
body: <p>I'm trying NOT to repeat myself with the SAME code, so I thought I would use the jQuery <code>.each()</code> method.  Every time I reload the webpage, I get this ajax error:</p>
  
  <p><img src="https://i.stack.imgur.com/m6nVC.png" alt="enter image description here"></p>
  
  <p>The loop keeps turning it into an object.  Here's my code:</p>
  
  <pre><code>var counterColors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple', 'pink',    'gray', 'brown'], $currentCounterColor;
  
  $(counterColors).each(function() {
      $currentCounterColor = $(this);
          (function($) {
              $(document).ready(function() {
                  $.ajaxSetup({
                      cache: false,
                      success: function() {
                          $('#count_' + $currentCounterColor).fadeIn(300);
                      }
                  });
                  $currentCounterColor.load('./' + $currentCounterColor + '.php');
                 var refreshId = setInterval(function() {
                 $currentCounterColor.load('./' + $currentCounterColor + '.php');
                }, 60000);
            })
       })(jQuery);
  });
  </code></pre>
  
  <p>I have 9 IDs like so:</p>
  
  <pre><code>#count_red
  #count_orange
  #count_yellow
  ... etc
  </code></pre>
  
  <p>Then I have 9 PHP files like so:</p>
  
  <pre><code>red.php
  orange.php
  yellow.php
  </code></pre>
  
  <p>I'm not familiar w/ this error..</p>