title: Clone image inside a div
body: <p>In the code I am writing I am attempting to clone a picture from inside a list and insert it inside a div. The image is also draggable to the div.</p>
  
  <p>For reference this is how I have my image in my HTML code</p>
  
  <pre><code>  &lt;img id="drag1" src="https://pixabay.com/get/19b738fe047c3bf9d39b/1440605897/smiley-163510_1280.jpg?direct" draggable="true" ondragstart="drag(event)" width=200px length=200px&gt;
  </code></pre>
  
  <p>Here is part of my test.js code:</p>
  
  <pre><code>$("#buttona").click(function () {
  
    $('#drag1').clone().insertAfter("#maindiv");
  
  });
  </code></pre>
  
  <p>I have two issues.</p>
  
  <ol>
  <li><p>How to I get it to copy inside my div. I only am aware of .insertAfter or .insertBefore</p></li>
  <li><p>Currently I can get it to insert the clone image after the div I want but the cloned image is behind another image. How can I get it to show up in front. I tried changing the z-index of the 2 images but it didnt change anything for the clone image, it was still behind the other image. </p></li>
  </ol>