title: How to add a marker on an image uploaded by user?
body: <p>I'm trying to build a website where user can upload an image and interact with the tools that given. However I cannot do what i want exactly. I want to add a marker on the image but the thing I did (searched and found) adds the marker all around the body part of the website. How can I restrict it only <code>img</code> part?</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;input type="file" onchange="previewFile()"&gt;&lt;br&gt;
    &lt;img id="myImg" src="" alt="Image preview..."&gt;
    &lt;script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"&gt;
    &lt;/script&gt;
    &lt;script&gt;
      $(document).ready(function() {
        $(function() {
          $(":file").change(function() {
            if (this.files &amp;&amp; this.files[0]) {
              var reader = new FileReader();
              reader.onload = imageIsLoaded;
              reader.readAsDataURL(this.files[0]);
            }
          });
        });
  
        function imageIsLoaded(e) {
          $('#myImg').attr('src', e.target.result);
        };
        
        $(document).click(function(ev) {
          $(".marker").remove();
          $("body").append(
            $('&lt;div class="marker"&gt;&lt;/div&gt;').css({
              position: 'absolute',
              top: ev.pageY + 'px',
              left: ev.pageX + 'px',
              width: '10px',
              height: '10px',
              background: '#000000'
            })
          );
        });
      });
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>