How do i render croppie again ?

Hi ! i am using croppie and its working fine. I was trying to add some functionality like clicking on a button gives me the cropped image [working fine] but i also wanted to add a button which takes be back to crop the same uploaded image. is there a way to render croppie again without actually refreshing the page[just using buttons and JS]. ThankYou. ;)

Here is my code below if you need to see the way i am using it right now. Sorry for my messy code just started with JS.

function imageIsLoaded(e) {
   //At default bootstrap stuff is displayed as user uploads a picture this function get called.
    console.log('Function Called...');
    let newHTML = "<div class=\"myCustomReplacer\"><div class=\"row\"><div id='colcol' class=\"col-md-auto\" style=\"width: 100%;margin-top: 20px;text-align: center;display: block;\"><div id='croppie'></div></div></div></div>";
    $('div.myCustomReplacer').replaceWith(newHTML);
    console.log('Cor replaced with Image');
    $('#uploadImage').attr('src', e.target.result); //this is the image URL
    console.log('Image src SET');

    function croppyCode() {
        let el = document.getElementById('croppie');
        let vanilla = new Croppie(el, {
            viewport: {width: 250, height: 250, type: 'circle'},
            boundary: {width: 600, height: 300},
            showZoomer: false,
            enableOrientation: true,
            enableResize: false
        });
        vanilla.bind({
            url: e.target.result, // using same uploaded image URL
            orientation: 0
        });

        document.getElementById('rightButtonText').innerHTML = "Preview";
        document.getElementById('rightButtonImage').src = "/static/User/ART/Preview.png";
        document.getElementById('rightButton').onclick = resultOnClick;

//this is basically the get cropped image button
        function resultOnClick() {
            vanilla.result({
                type: 'base64',
                size: 'viewport'
            }).then(response => {
                $('div.myCustomReplacer').replaceWith('<div class="myCustomReplacer"><img style="margin-top: 20px;;display: block;\n' +
                    '  margin-left: auto;\n' +
                    '  margin-right: auto;\n' +
                    '  height: 250px;" id="finalImage" alt="" src=""></div>');
                document.getElementById('finalImage').src = response;
                document.getElementById('rightButtonText').innerHTML = "Edit Picture";
                document.getElementById('rightButtonImage').src = "/static/User/ART/Edit.png";
                // vanilla.destroy();
                document.getElementById('rightButton').onclick = backOnClick; //changing the onclick function so i can use the same button to go back to cropping my pic
            });
        }
//Function where i would like to render croppie again.
        function backOnClick() {

        }

Foliotek / Croppie

How do i render croppie again ? #723