Draggable does not work on a cloned element

[nadiam]

Hi guys. I got draggable to work but im having a problem with draggable on a cloned element.

I have a button class .r6s that when clicked an image will appear in the containment-wrapper. The image is wrapped in a div
with id sixr. what i did is initially hide the sixr div then when r6s is clicked it will appear as a clone in the containment-wrapper. All that happens except after that draggable doesnt work. If it isn't cloned it does work but as cloned it doesnt. TIA

<script type="text/javascript" src='js/jquery-1.11.1.js'></script>
<script type="text/javascript" src='js/jquery-ui-1.11.0/jquery-ui.js'></script>

<script>
$(function() {
    $( "#sixr" ).draggable({ containment: "#containment-wrapper", scroll: false });

    var sixr = $("#sixr").hide();//hide 6 seater round table img
    var element = $("#containment-wrapper");

    $(".r6s").on("click", function(){
        var Srt = $("#sixr:first").clone();
        $(element).append(Srt);
        $(Srt).show();
    });
});
</script>

<div class="6r ui-widget-content" id="sixr">
    <img src="img/r6seats.png" width="150" height="150" usemap="seat6">
</div>   

<div id="containment-wrapper">

</div>

[MasterChat]

the issue may have to do with hiding the #sixr
check it again

[nadiam]

the issue may have to do with hiding the #sixr

yeah. so is there no way to work around that?