So I am trying to replicate Facebook's picture tagging functionality, and I have the functionality that onClick, a box is created and there is a comment box.

Now the issue is that I want to be able to (without doing any back-end processing) take the input from the input field and add it in some form to the underlying image area that they have selected. I would also like to add a small image to that area, that shows that a comment is there.

How do I do that?

See the code below for what I have for the comment box:

<script type="text/javascript">

    $(function() {
            var tag_box = $("<div>").appendTo("body").css({
                "width": "40px",
                "height":"40px",
                "border":"4px solid #000000",
                "position":"absolute",
                "display":"none", 
                "padding":"15px"
                });

        var comment_box = $("<form action='#'><input id='comment' type='text' name='comment' placeholder='Add comment'></form>").appendTo(tag_box).css({"position":"absolute"});            

        $("#image-wrapper").live('click', function(e){
            tag_box.css({
                "left": e.pageX - 40,
                "top": e.pageY - 40, 
                "display": "block"
                })
            .after(comment_box.css({
                "left": e.pageX - 65,
                "top": e.pageY + 40
            }));

            });

        });


</script>

Now...whenever the user presses enter, the info in the comment box is appended to the URL like so:

.html?comment=comment value#

Thanks