Duplicated button is not draggable


Hi all,

I’m building a app to drag buttons to a picture as indication of work to do.
But when I duplicate a button in jQuery (Included jquery library for this).

After it duplicates I try to drag the button, but it’s not working.
Can somebody help me out?

Here is my code.

<div class="canvas-options">
            <zoomable-canvas id="canvas-img" ondrop="drop($event)"
                (topChange)="top = $event" (bottomChange)="bottom = $event" 
                (leftChange)="left = $event" (rightChange)="right = $event"
                [(centerX)]="centerX" [(centerY)]="centerY"
                [(zoomLevel)]="zoomLevel" [maxZoom]="maxZoom" [minZoom]="0"
                (canvasWidthChange)="canvasWidth = $event" (canvasHeightChange)="canvasHeight = $event">

            <ion-col *ngFor="let btn of elements">                
                <button class="drag-button btn{{ btn.id }}"  draggable="true" (click)="duplicate($event, btn)" [style.background-color]="btn.kleur">
                    {{ btn.artikelnummer }}


duplicate(event, btn){

         * Get the current element by click
        let value = event.srcElement['attributes']['class']['value'];

        // Split it
        let split = value.split(" ");
        let use = split[1];

         * Clone the item and prepare it to been draggable
        let html = '<button class="drag-button btn'+btn.id+'" draggable="true" (click)="show($event)" [style.background-color]="btn.kleur">'+btn.artikelnummer+'</button>';



        var data = event.dataTransfer.getData('text');

Here is a screenshot to see the current example in action:

Thanks in advance