Dynamically added jQuery RateIt not working

I have an MVC application with form data in a partial view, populated via Ajax. In this form, I have a select for which I need a star rating system.

That does work.

What does not work is: I need to be able to clone both the select and its rating system, so that I then have two selects with a star rating each. (Add item, basically).

Adding the first RateIt is pretty simple:

<span class="rateit" id="rateit0"></span>

The fancy parts get rendered automatically later. I have encapsulated the select and its rating by a div, so I can simply create the clone with JQuery like this:

var klon = $(item).closest('div').clone(true);

After that I make sure all IDs in the clone are updated so that I can properly identify each component. Works fine, at least for the select. What does not work though is the rating system. I do get a second RateIt accompanying my newly created select - but I cannot set any value. All hovering causes the first rating to update.

Here is what my two RateIts look like after cloning:

<span class="rateit" id="rateit0">
  <button id="rateit-reset-2" type="button" data-role="none" class="rateit-reset" aria-label="reset rating" aria-controls="rateit-range-2"></button>
  <span aria-readonly="false" style="width: 80px; height: 16px;" id="rateit-range-2" class="rateit-range" tabindex="0" role="slider" aria-label="rating" aria-owns="rateit-reset-2" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0">
    <span id="select0" class="rateit-selected" style="height: 16px; width: 0px;"></span>
    <span id="hover0" class="rateit-hover" style="height: 16px; width: 0px; display: none;"></span>
  </span>
</span>

and

<span class="rateit" id="rateit1">
  <button id="rateit-reset-21" type="button" data-role="none" class="rateit-reset" aria-label="reset rating" aria-controls="rateit-range-21"></button>
  <span aria-readonly="false" style="width: 80px; height: 16px;" id="rateit-range-21" class="rateit-range" tabindex="1" role="slider" aria-label="rating" aria-owns="rateit-reset-21" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0">
    <span id="select1" class="rateit-selected" style="height: 16px; width: 0px;"></span>
    <span id="hover1" class="rateit-hover" style="height: 16px; width: 0px; display: none;"></span>
  </span>
</span>

Here, I have guessed what needs to be adapted and settled on aria-owns and aria-controls as well as ids.

After the cloning is done, I conclude by activating the RateIts (or at least so I think) and bind the tooltips:

$('.rateit').each(function() {
    $(this).rateit();
    $(this).bind('over', function (event, value) { $(this).attr('title', tooltipvalues[value - 1]); });
});

Can anybody tell me what I am doing wrong?

Got it working. One must not leave the existing RateIt in the clone and try to adapt IDs there. The events will not be properly bound then.

You must remove the RateIt from the clone, append/insert a fresh, unitialized RateIt span at the proper position and initialize it:

var klon = $(item).closest("div").clone(true);
var tmp = $(klon).find("select").each(function () {
            $(this).attr({
                    'id': function (_, id) { return id.replace(oldnum, newnum) },
                    'name': function (_, name) { return name.replace(oldnum, newnum) }
                });
    }).end();
tmp.find(".rateit").each(function () {
        $(this).remove();
    }).end();

$(item).closest("td").append(tmp);
    $('<span class="rateit" id="rateit' + newnum + '" data-rateit-step="1"></span>').insertAfter("#Subject" + newnum);
    $("#rateit" + newnum).rateit();

Et voilà.