append a div to another div only once on droppable drop
<p>I have a draggable element , that when its dropped onto the target, it adds a delete button:</p>

<pre><code>    $( "#committed" ).droppable({
                hoverClass: 'drophover',
                drop: function( event, ui )
                {

                    $(function()
                    {
                        var done;

                        if( done ) return;
                        done = true;

                        $(ui.draggable).append('&lt;button class="delBtn" type="reset"&gt;X&lt;/button&gt;');

                        $(ui.draggable).draggable( "option", "disabled", true );

                        $( "#sortable" ).sortable();
                        $( "#sortable" ).disableSelection();                            

                    });

                }
</code></pre>

<p>Once its been dropped, it then becomes sortable. The issue is , everytime the element is sorted, the Delete button gets added again. As there are multiple elements being dragged and dropped and then sorted, so <code>.length&gt;?</code> doesn't work. </p>

<p>I essentially need </p>

<pre><code>If (this.delBtn exists)
</code></pre>
