jQuery - Combine clone contents and fadeIn

Question

I'm trying to achieve this result:

Features:

1. Tooltip shows instantly, on click.
2. FadeIn and position animation starts at same time, and then, still while animating position, the element fades out.
3. Several tooltips can be visible at once (in case two or more buttons are clicked shortly one after another)
4. Message content is taken from a dynamic JSON object.

I'm able to duplicate and display the tooltip onclick, but for some reason unable to animate it, or replace it's content.

I don't get how can I select the new duplicated element.

See example error below, or jsFiddle.

html:

<div id="ptsAlert">
    <span class="ptsAlert">
        message
        <div class="ptsAlert-arrow"></div>
    </span>
</div>

<table>
    <tr>
        <td class="btn">01</td>
        <td class="btn">02</td>
        <td class="btn">03</td>
    </tr>
    <tr>
        <td class="btn">04</td>
        <td class="btn">05</td>
        <td class="btn">06</td>
    </tr>
</table> 

css:

h1 {
    font-size:50px;
    margin:10px;
}
body {
    text-align:center;
}
td {
    border: 1px solid;
    padding: 5px;
    cursor: pointer;
}

.ptsAlert {
  display:none;
  background-color: #EE0000;
  color: #FFFFFF;
  font-size: 27px;
  font-weight: bold;
  line-height: 1.7em;
  margin: 10px auto;
  padding: 0 10px;
  position: absolute;
  text-align: center;
}

.ptsAlert-arrow{
  border-color: #EE0000 transparent transparent;
  border-style: solid;
  border-width: 8px;
  bottom: -15px;
  height: 0;
  left: 3px;
  position: absolute;
  width: 0;
}

jQuery:

//Function to show points alerts
$('.btn').click(function(event) {
    var points = 10;
        $('#ptsAlert').clone(true, true).contents()
            .appendTo('body')
            .css('top', (event.pageY - 75) + 'px')
            .css('left', (event.pageX - 10) + 'px')
            .css('display', 'inline-block')
            //.hide().fadeIn();
});

The commented line .hide().fadeIn()produces the following error:

NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle]

Answer 1

//Function to show points alerts
$('.btn').click(function(event) {

      $('#ptsAlert').find("> span").clone(true, true)
            .css('top', (event.pageY - 75) + 'px')
            .css('left', (event.pageX - 10) + 'px')
            .css('display', 'inline-block')
            .appendTo($('body'))
            .hide().fadeIn(); //this line doesn't break the code (anymore)
});

optimized

    var $body=$(document.body);
    var $ps=$("#ptsAlert");
    var $tltp = $ps.find(">span");
    $body.on("click",".btn",function(event) {
       $tltp.clone(true, true)
            .css('top', (event.pageY - 75) + 'px')
            .css('left', (event.pageX - 10) + 'px')
            .css('display', 'inline-block')
            .appendTo($body)
            .hide().fadeIn();
      });