Icon-Picker shows up multiple times after clone-function

Vote count:

0

and first of all: sorry for my bad english AND im really not a jquery-pro - so please go easy on me :-)

Here are the most important code-snippets + example... please tell me if you need more to help me.

HTML + inline jquery icon picker:

<div class="full" style="margin-bottom: 0;">

                                    <span class="two_fifth first" style="margin-bottom: 0;">
                                        <h3 class="skill-item-title">Symbol wählen</h3>
                                    </span>

                                    <span class="three_fifth" style="margin-bottom: 0;">

                                        <input id="icon2" type='' class="criteria_name_two show-tick" name='' style="width: 100%; float: left;" value='' placeholder="">

                                        <script type="text/javascript">
                                    jQuery(document).ready(function($) {
                                        var icons = {
                                            'Webapplikationen' : ['fa fa-car', 'fa fa-caret-square-o-down', 'fa fa-caret-square-o-left']
                                        };
                                        $('#icon2').fontIconPicker({
                                            source: icons,
                                            emptyIcon: true,
                                            hasSearch: true,
                                            allCategoryText: 'Alle Anzeigen',
                                        });
                                    });
                                    </script>
                                    </span>

                                </div>

jQuery (Clone):

//ADD SERVICE
jQuery('#template_service').hide();
jQuery('#submit_add_service').on('click', function() {      
    $newItem = jQuery('#template_service .option_item').clone().appendTo('#resume_service').show();
    var tmp = $newItem;
    tmp = $.unique( tmp );
    if ($newItem.prev('.option_item').size() == 1) {
        var id = parseInt($newItem.prev('.option_item').attr('id')) + 1;
    } else {
        var id = 0; 
    }
    $newItem.attr('id', id);

    $newItem.find('.skill-item-title span.num').text(id+1);

    var nameText = 'wpjobus_company_services[' + id + '][0]';
    $newItem.find('.criteria_name').attr('id', 'fuck').attr('name', nameText);

    var nameText = 'wpjobus_company_services[' + id + '][1]';
    $newItem.find('.criteria_name_two').attr('id', 'fuck').attr('name', nameText);

    var nameText = 'wpjobus_company_services[' + id + '][2]';
    $newItem.find('.criteria_notes').attr('id', 'fuck').attr('name', nameText);

    var nameText = 'fuck';
    $newItem.find('.criteria_icon').attr('id', 'fuck');

    //event handler for newly created element
    $newItem.children('.button_del_service').on('click', function () {
        jQuery(this).parent('.option_item').remove();
    });

});

Example: http://kufifi.at/test/last/2.html

The Problem in a few words: After I call the Clone() function the picker shows up twice. My guess is that it has something today with a not yet ready DOM or with multiple ID's but as i said im really not good @ jquery and im REALLY at the end with this.

Sorry for the poor code - i "played" arround with it really much the last day trying to solve the problem.

Hope someone can help me.

Thanks, NiXxon.

asked 36 secs ago

Niko

1

Icon-Picker shows up multiple times after clone-function