jQuery在.each内部更改图像属性

Question

I have a textarea when I paste HTML code, and then a button that loads below the textarea all of the images from that HTML code and it's respective alts and titles. The idea is to easily change each alt and title for each image. But I can't seem to get it working.

Here is the codepen: https://codepen.io/anon/pen/LzVzbd?editors=1010

Insert this example into the textarea, and then click Search. The idea is to replace the title and alt in the inputs, and then click update, and the code in the textarea updates.

<div>
   <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png">
</div>

EDIT: This is just a really simple example, The problem is that the people who going to use this paste whole html pages in the textarea. So the images can be wrapped around table , div , a , p , etc... I'm going to update my question with this information. Here is a more real life example:

<tr valign="top"><td valing="top">
        <a href="https://stackoverflow.com" style="text-decoration:none; border:0;">
        <img src="https://i.stack.imgur.com/oURrw.png" border="0" style="width: 100%;  max-width: 100%; margin: 0px; padding: 0px; vertical-align:top; display:block" alt="Stack1" title="Stack1" /></a>
        </td>
        </tr>
        <tr valign="top"><td valing="top">
        <a href="https://stackoverflow.com" style="text-decoration:none; border:0;">
        <img src="https://i.stack.imgur.com/oURrw.png" border="0" style="width: 100%;  max-width: 100%; margin: 0px; padding: 0px; vertical-align:top; display:block" alt="Stack2" title="Stack2" /></a>
        </td>
        </tr>
        <tr valign="top"><td valing="top">
        <a href="https://stackoverflow.com" style="text-decoration:none; border:0;">
        <img src="https://i.stack.imgur.com/oURrw.png" border="0" style="width: 100%;  max-width: 100%; margin: 0px; padding: 0px; vertical-align:top; display:block" alt="Stack3" title="Stack3" /></a>
        </td>
        </tr>

Answer 1

Get the jQuery html object of your image list $('.image_list') , update that using jQuery, then insert the html value of that into the textarea. So, after the tags update, do:

Edited to fix a problem

var html = "<div>";
$('.image_list img').each(function(){
  html += $(this)[0].outerHTML;
});
html += "</div>";
$('.before_text.replace').val(html);