title: Extract SRC's from selected images, comma separated
body: <p>I'm using a Wordpress plugin where I can only <strong>type</strong> attachment urls (comma separated) in an input box. I need to alter the code so I can click an image and it will extract the src to put it in the input box. </p>
  
  <p>I made it possible with only one image.</p>
  
  <p>First, I echo'd all the images from my media library. And then I did this:</p>
  
  <pre><code>    &lt;img class="media-image" src="&lt;?php echo $images[$i]; ?&gt;"/&gt;
      &lt;script type="text/javascript"&gt;
      jQuery(document).ready(function() {
          jQuery('.media-image').click(function(){
              var thisValue = jQuery(this).attr('src');
              var thisTarget = jQuery('#target');
              thisTarget.val(thisValue);
              return false;
          });
      });
      &lt;/script&gt;
  
      &lt;input id="target" type="text"&gt;&lt;/input&gt;
  </code></pre>
  
  <p>What this does: Whenever I click an image, the src will be put in the input text box. When I click another image, the value will be changed accordingly. </p>
  
  <p>But how can I achieve this with multiple images? So, if I click 3 images, I want all the src's to be comma separated in the input field. Whenever I click a selected image again, I want it to be deselected (i.e. I want the src to be removed from the input).</p>