Jquery Jcrop plugin loads image multiple times

Question

I ran into an issue with jquery Jcrop plugin

I'm using it to allow the user to crop an image, but when he/she is not satisfied with that, I set to reset the original image.

I use PHP to store the original image and cropped the image as well.

When the user hits the reset button the original image loads from the server and jcrop is reapplied.

But dear friends my issue is when the user clicks the "reset image" button the cropped image and original image both are displaying. there is a new tag with no id or class is created by Jcrop and it doesn't remove when I destroy jcrop.

below is my code for the reset button

    $("#reset_crop").click(function(){
    refreshImg($("#profpic"), "files/"+fileName); 

/* refreshImg function adds date at Date() at the end of the image url to ignore cache. and change the src attr to the original file name. */

    $(this).attr("disabled","disabled");
    jcrop.destroy();
    $("#profpic").on('load',function(){ jcrop = createJcrop();  });

    });

My Jcrop settings are

function createJcrop(){


return  $.Jcrop("#profpic",{
            boxWidth:345,
            trueSize:[width, height],
            width:345,
            onSelect: showCoords,
            onChange: showCoords
        });
}

the function of the crop button is

    $("#crop").click(function(){
    jcrop.release();
    var newfile;
        jcrop.destroy();
        $.ajax({
        url:'crop.php',
        async:false,
        data:{fileName:fileName,width:coordinates[0],height:coordinates[1],x:coordinates[2],y:coordinates[3]},
        success:function(data){
                //console.log(data);
                    newfile = data;
            },
        error:function(){

                alert("something went wrong");
            }
    });

    refreshImg($("#profpic"), "files/"+newfile);
    $("#reset_crop").removeAttr('disabled');

$(this).attr("disabled","disabled");

});