title: jQuery changing the source folder of multiple images
body: <p>I'm trying to have my images source attributes to change when a certain button is clicked. I got this code as of the moment.</p>
  
  <pre><code>$('.palettemain #brown').click(function () {
      var imageName = $('.panestop span &gt; img').attr('alt');
      var imageFolder = 'images/sitebuilder/logo/brown/';
      $('.panestop span &gt; img').each(function () {
          $(this).attr('src', imageFolder + imageName);
      });
  });
  </code></pre>
  
  <p>As you can see I have declared variable names for the image name and the image folder. when I click <code>.palettemain #brown</code> (the button) it loads the image, also fetching the correct folder name and image file name. The thing here is, only the first instance image file name is fetched. Below is the HTML code before the click happens.</p>
  
  <pre><code>   &lt;span&gt;
         &lt;input type="radio" name="logo" checked="checked" /&gt;
         &lt;img src="images/sitebuilder/logo/default/logo01.png" alt="logo01.png" /&gt;
     &lt;/span&gt;
     &lt;span&gt;
         &lt;input type="radio" name="logo" checked="checked" /&gt;
         &lt;img src="images/sitebuilder/logo/default/logo02.png" alt="logo02.png" /&gt;
     &lt;/span&gt;
     &lt;span&gt;
         &lt;input type="radio" name="logo" checked="checked" /&gt;
         &lt;img src="images/sitebuilder/logo/default/logo03.png" alt="logo03.png" /&gt;
     &lt;/span&gt;
  </code></pre>
  
  <p>Below is the output when clicked:</p>
  
  <pre><code>   &lt;span&gt;
         &lt;input type="radio" checked="checked" name="logo"&gt;
         &lt;img alt="logo01.png" src="images/sitebuilder/logo/brown/logo01.png"&gt;
     &lt;/span&gt;
     &lt;span&gt;
         &lt;input type="radio" checked="checked" name="logo"&gt;
         &lt;img alt="logo02.png" src="images/sitebuilder/logo/brown/logo01.png"&gt;
     &lt;/span&gt;
     &lt;span&gt;
         &lt;input type="radio" checked="checked" name="logo"&gt;
         &lt;img alt="logo03.png" src="images/sitebuilder/logo/brown/logo01.png"&gt;
     &lt;/span&gt;
  </code></pre>
  
  <p>The output, as you can see, is duplicating the first image <code>alt</code> attribute. How do I fetch the <code>alt</code> attribute for each instance of the image?</p>