I am messing around real3d-flipbook to include a new button where the user can decide whether he wants to view the pdf as 2 pages like a book or single page.

I have managed to do the code but when I change the singlePageMode on click of the button, a particular method is being called multiple times resulting in Uncaught RangeError: Maximum call stack size exceeded This is where I am changing the singlePageMode from flipbook.min.js

togglePage:function(){
        var e=this.options;
        e.singlePageMode=!e.singlePageMode;
        this.toggleIcon(this.btnPage,e.singlePageMode)                                                      
},

and this is the function in flipbook.book3.min.js that is being called multiple times when I change the singlePageMode:

FLIPBOOK.Book3.prototype.updateBookPosition=function(){ 
    if(this.options.singlePageMode)
        return this.setWrapperW(this.pageWidth),this.$wrapper.width(this.pageWidth),this.scroll&&this.scroll.refresh(),this.view=1,void this.focusRight();1==this.view?this.setWrapperW(this.pageWidth):this.setWrapperW(2*this.pageWidth),this.scroll&&this.scroll.refresh(),2==this.view?this.isCover()?this.focusRight():this.isBackCover()&&this.options.cover?this.focusLeft():this.focusBoth():1==this.view&&(this.isCover()?this.focusRight():this.isBackCover()&&this.focusLeft())},

I have tried to recreate the book like this which results in another book under the previous one with no idea how to remove the first one:

togglePage:function(){
    var e=this.options;
    e.singlePageMode=!e.singlePageMode;
    this.loadScript(FLIPBOOK.flipbookBook3Src,this.createBook),
    console.log(this);
    this.toggleIcon(this.btnPage,e.singlePageMode)                                                      
},

This eliminates the problem with calling updateBookPosition multiple times but is showing 2 books - the original above the new one. Any idea how I eliminate the previous one or update it without hitches?