Cropper did not reinitiate If I did not crop the old image first

Question

I have a problem in my project.

I am using cropper for image. But the cropper did not working correctly. When I upload a image the crop option shown. But If I add another image without crop the first one then the cropper not changing the image.

Here is my Code

function initCropper(){
    var crop_button_show = document.getElementById("crop_button_show");
    crop_button_show.style.display = "block";
    var image = document.getElementById('thumbnail_preview');
    var cropper = new Cropper(image, {   
        viewMode: 3,
        aspectRatio: 500/410,
        cropBoxResizable: false,
        minCropBoxWidth: 500,
        minCropBoxHeight: 410, 
    });

    document.getElementById('crop_button').addEventListener('click', function(){
        var imgurl =  cropper.getCroppedCanvas().toDataURL();
        var img = document.createElement("img");
        img.class = "img-responsive show-preview";
        img.src = imgurl;
        img.id = "thumbnail_preview";
        jQuery("#image_resize").empty();
        jQuery("#image_resize").append(img);

        var input = document.createElement("input");
        input.name = "image";
        input.type = "hidden";
        jQuery("#image_resize").append(input);
        $('input[name=image]').val(imgurl.replace('data:image/png;base64,', ''));
        crop_button_show.style.display = "none";
    });
}

I dont know where to reset the croper from second time. If I crop the image and then reupload the imgae then the cropper working perfectly.