JQuery loop duplicate result <p>Currently I have a list of elements for an isotope page. The basic markup for an element is:</p> <pre><code>&lt;div class="element conference-box"&gt; &lt;a href="#"&gt;&lt;img src="#" class="conference-image" alt=""&gt;&lt;/a&gt; &lt;div class="caption"&gt; &lt;div class="confback"&gt;&lt;/div&gt; &lt;h3 class="conference-title"&gt;&lt;/h3&gt; &lt;h4 class="conference-details"&gt;&lt;/h4&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>There around 30 or so elements on the page.</p> <p>I've been trying to use jQuery to take the image with the class "conference-image" and apply it as a background image to the .confback div, while retaining the original image. I had some success using this code:</p> <pre><code>$('.element').each(function() { var getImageSrc = $('.conference-image').attr('src'); $('.confback').css('background-image', 'url(' + getImageSrc + ')'); return true; }); </code></pre> <p>However, my script takes the image from the very first element and applies that as the background image for every .confback div in every element on my page. Obviously, I would like each individual element to use the image that has been used in that particular element.</p>