title: Add element on top of image dynamically
body: <p>When I click the button, it has to add an object (img, p) inside the div and the image with border and then take the position of that object, (x, y coordinates).</p>
  
  <p><a href="https://i.stack.imgur.com/vs11L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vs11L.png" alt="screenshot"></a></p>
  
  <p>How can I make this using JQuery?</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;div style="height: 440px; border: 1px solid; width: 880px; margin-top: 50px; margin-left: -12px;"&gt;
      &lt;img id="imagem-principal" width="880" height="440" class="custom_media_image attachment-post-thumbnail" src="&lt;?= $segunda_imagem; ?&gt;"&gt;
  &lt;/div&gt;
  </code></pre>