draggable is mutiplied when dragged

Question

why would a draggable become 2 same images when they are dragged? i have been trying to get this right but i cant seem to find a solution i even changed the id name with unique name but cant seem to fix the problem. is their any solution to this here is my fiddle https://jsfiddle.net/2taya76y/4/

    // External added
    jQuery(download).ready(function () {
        jQuery(".file-upload-wrapper").hide();
        jQuery(".out-put-img1").hide();
        jQuery("#imajes45").change(function () {
            var selected = jQuery('#imajes45').val();
            if (selected == "new-upload") {
                jQuery(".file-upload-wrapper").show();
            } else {
                jQuery(".file-upload-wrapper").hide();
            }
        });

        //File
        function readURL(input) {

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    jQuery(".out-put-img1").show();
                    $('#output1').attr('src', e.target.result);
//                   / $('.append-img').append('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        jQuery("#upload-img1").change(function () {
            readURL(this);
   
 $('#dragbal').draggable();
$('#output1').resizable();
 

        });
    });