Modify an element when an image is loaded using a utility function
<p>I want to iterate over a set of <code>p</code> elements and add a dynamically created <code>img</code> element to each one. When the added image is <code>load</code>ed I want to add some text to the <code>p</code> element which contains it using a custom utility function called <code>addText</code>.</p>

<p>My non working code: (See it in action at <a href="http://jsbin.com/abebof/2/edit" rel="nofollow">http://jsbin.com/abebof/2/edit</a>)</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Example&lt;/title&gt;
    &lt;style&gt;img { max-width: 100%; }&lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;Image #1&lt;/p&gt;
    &lt;p&gt;Image #2&lt;/p&gt;
    &lt;p&gt;Image #3&lt;/p&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;

    &lt;script&gt;

function addText(paragraph, text) {
  paragraph.text(paragraph.text() + '. ' + text);
  console.log('called');
}

$('p').each(function (i) {
  jthis = $(this);
  jthis.css('border', '5px solid');
  addText(jthis, 'The function works!');

  var jimg = $('&lt;img src="http://i.imgur.com/IH38U.png class="loading" /&gt;');

  jimg.load(function () {
    addText(jthis, 'Loaded!');
  });
  jimg.appendTo(this);
});

    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Problems with it I'm asking for help with:</p>

<ol>
<li>No image is loaded into the <code>Image #3</code> paragraph. Why not?</li>
<li>The <code>Loaded!</code> message is printed into the <code>Image #3</code> paragraph for each image. It should be printed into the paragraph containing the image. How do I rectify it?</li>
</ol>
