Set Div position to Mouse position with jQuery

we are  trying to position my Div wherever the user clicks on textbox.Show a hidden div at mouse position when a text box is clicked
Here is the full code:
Jquery:

var id4com="";
 $('.txt4com').on('click',function (e) {
e.preventDefault();
// $('#4com').css( 'position', 'absolute' );
       var o = {
            left: e.pageX,
            top: e.pageY
        };
        $("#4com").show(200).offset(o);

 id4com=$(this).attr('id'); 
   });
 $(".sp4com").click(function(){

  $("#"+id4com).val($(this).text())
$('#4com').toggle();
 });

HTML

<div id="4com" class="divplace" style="min-width:100px;background: #fff; overflow: auto; border: 1px solid #999; display: none; ">

<span class="sp4com">LADC</span><br>

<span class="sp4com">All ZNA</span><br>

<span class="sp4com">Fore/ODC</span><br>

<span class="sp4com">LADC</span><br>

<span class="sp4com">ODC</span><br>

<span class="sp4com">ZNA</span><br>

<span class="sp4com">Foremost</span><br>

<span class="sp4com">ZDU (UUG)</span><br>

<span class="sp4com">Canada</span><br>

<span class="sp4com">REM</span><br>

<span class="sp4com">Other</span><br>

<span class="sp4com">N/A</span><br>

</div>