title: Duplicate Image Source to Another Image Tag More Than One Instance with a Single Function?
body: <p>Is there a way to apply a single function to an array of images which would duplicate an image's source from one img tag to another?</p>
  
  <p>In the image example provided, I would like to have each image display with a duplicate image tag appearing right after, like so:</p>
  
  <p><a href="https://i.stack.imgur.com/KvKWC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KvKWC.png" alt="enter image description here"></a></p>
  
  <p>You can view a snippet below to refer to/edit the code I am currently working on to produce this.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.pic &gt; img').show(function() {
    var srcToCopy = $(this).attr('src');
    $('#imgsrc').attr('src', srcToCopy);
    console.log($('#imgsrc').attr('src'));
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.pic,
  #imgsrc {
    display: inline-block;
  }
  
  .container {
    display: block;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Copy image 1 src: First instance --&gt;
  &lt;div class="container"&gt;
    &lt;div class="pic"&gt;
      &lt;img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png"&gt;
    &lt;/div&gt;
    &lt;img id="imgsrc" /&gt;
  &lt;/div&gt;
  
  &lt;!-- Copy image 2 src: Second instance --&gt;
  &lt;div class="container"&gt;
    &lt;div class="pic"&gt;
      &lt;img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png"&gt;
    &lt;/div&gt;
    &lt;img id="imgsrc" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help or suggestions would be much appreciated.</p>