HTML element added to the DOM as a string

I’ve got a jsFiddle here to demonstrate the issue:

https://jsfiddle.net/mbwu3ap7/2/

Outcome, I want to add a button to the input when the mouse enters the input.

Here is my HTML:

<input type="text" class="form-control guidInput"/>

here is my jQuery:

 $(document).on("mouseenter",
    ".guidInput",
    function(e) {
        this.after('<button id="fooBar">add user</button>');
    });

What I want is a button adding to the DOM, instead I get a double quoted string added:

Notes: I’m using ‘on’ as the input will be dynamically added to the DOM after the page has rendered.

>Solution :

Edit: Thanks for the comments and the hints.

Just wrap "this" into a jquery selector and it will work as expected:

https://jsfiddle.net/q85pfmex/

     function(e) {
        $(this).after('<button id="fooBar">add user</button>');
    });