How to clone element using Bootstrap star rating

Question

I'm using this library to rate on my website. The problem I have is after i click on the button to clone all elements in #skill div, I can't click on that element to rate. I know that I need to reinitialize the plugin after clone. But I'm stuck with this. I have a div like this

<div class="sectionContent" id="skill">
    <article class="skill">
        <span contenteditable>-PHP</span>
        <input class="rating" data-show-clear="false" data-show-caption="true" data-size="xs" data-show-caption="true" data-step="1">
    </article>
</div>

And jquery using clone

$('#btnAddSkill').click(function() {
    $('.skill:first').clone().appendTo("#skill");
    $(".rating:last").rating({
        starCaptions: {1: "Kém", 2: "Yếu", 3: "Trung Bình", 4: "Khá", 5: "Tốt"},
        starCaptionClasses: {1: "text-danger", 2: "text-warning", 3: "text-info", 4: "text-primary", 5: "text-success"},
        size:'xs'
    });
});

Answer 1

Your problem is you are cloning the container when the plugin has already ran on the input, which creates alot of wrappers, etc around the input.

you need to clone the input, then wrap that the same as the original html, then call the .rating.

$('#btnAddSkill').click(function() {
    var article = $('<article />', {class:"skill"}).append('<span contenteditable="">-PHP</span>');
    $('.rating:first').clone().appendTo("#skill").wrap(article);
    $(".rating:last").rating({
        starCaptions: {1: "Kém", 2: "Yếu", 3: "Trung Bình", 4: "Khá", 5: "Tốt"},
        starCaptionClasses: {1: "text-danger", 2: "text-warning", 3: "text-info", 4: "text-primary", 5: "text-success"},
        size:'xs'
    });
});

Fiddle