title: Dynamically append input where mouse clicked
body: <p><a href="https://i.stack.imgur.com/Xi6gd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xi6gd.jpg" alt="enter image description here" /></a></p>
  <p>I'm trying to show an input where my house clicked, if I don't enter anything in the put, the input will show in the next mouse click. Somehow, I can't seems to type inside that input.</p>
  <p>I have</p>
  <pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css&quot; integrity=&quot;sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot; /&gt;
  
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  
  
  &lt;style type=&quot;text/css&quot;&gt;
  html,
  body {
      height: 100%;
  }
  
  i{
      z-index:10000;
      color: white;
      font-size: 20px;
  }
  
  
  .btn-done {
      z-index:10000;
      position: absolute;
      right: 5px;
      top: 5px;
  }
  
  .btn-done {
      z-index:10000;
      position: absolute;
      right: 15px;
      top: 5px;
  }
  
  &lt;/style&gt;
  
  &lt;a href=&quot;/api-mapper&quot; class=&quot;btn btn-default btn-cancel&quot;&gt;Cancel&lt;/a&gt;
  &lt;a class=&quot;btn btn-success btn-done&quot;&gt;Done&lt;/a&gt;
  
  &lt;img src=&quot;{{ \Storage::disk('s3')-&gt;url($apiMapperImage-&gt;full) }}&quot; width=&quot;100%&quot;&gt;
  
  &lt;script type=&quot;text/javascript&quot;&gt;
  
      var pins = []; 
      var i = 0; 
  
      $(&quot;body&quot;).click(function(e) {
  
          var api = {}; 
          api.x = e.pageX-10;
          api.y = e.pageY-10;
  
          $(&quot;input&quot;).hide();
          const input = $('&lt;i class=&quot;fa fa-location&quot;&gt;&lt;/i&gt; &lt;input type=&quot;text&quot; name=&quot;'+ api.x+'-'+api.y +'&quot;&gt;').css(&quot;position&quot;, &quot;absolute&quot;).css(&quot;top&quot;, e.pageY-10).css(&quot;left&quot;, e.pageX-10)
          $(&quot;body&quot;).append(input);
          pins.push(api);
  
          $(&quot;input&quot;).click(function(e) {
              console.log($(this).val())
          });
  
          console.log(&quot;pins&quot;,pins);
          
      
      });
  
  
  
  &lt;/script&gt;
  </code></pre>