Adding images dynamically to divs using an jQuery each() .. somehow they are all adding to the last div
<p>So I'm trying to go over each image in a gallery and overlay it with another returned from php.  I collect all the , and then iterate over them, creating a "holding frame", and then adding the dynamic image to that.  </p>

<p>Somehow they are all adding to the final image I process.  Each image gets a frame, but the new images are all overlayed on the final image in the gallery.</p>

<p>What am I doing wrong.  I've used that=this to take care of scope in the AJAX callback, </p>

<pre><code>var $allPics = $(".pixelsandwich");
$allPics.each(function(){

    $(this).wrap('&lt;div class="pixelsandwichFrame" /&gt;');
    src = $(this).attr('src');
    $that = $(this); 
    $.ajax({
        type:"POST",
        url:"js/pixelsandwich/pixelsandwich.php",
        data:{src:src},
        success:function(response){
            newImg = $("&lt;img class='crunched'&gt;");
            newImg.attr('src', response);
            frame = $that.parent();
            frame.append(newImg); // &lt;&lt; these are all appending to the frame of the last image instead of each one
        }
    });
});
</code></pre>
