I am working on an interactive fiction project that allows the user to choose multiple pathways through the story. I have a div with the narrative (#bigtext) and a box with three options in it (#Option1, #Option2, #Option3 - all designated with HTML span elements) and clicking an option activates a function which updates both the text and the options for the next "page" of the story. Each "page" is a different function which means I can have full control over the background, so refreshing the page is out of the question.

When I click on an option, it activates the function. All text fades out, is updated via javascript and then fades back in again. My problem is that when I click the button again, it not only calls the desired function, but also the one designated for the previous button. I've attached a sample of the code to demonstrate.

 **This is the function that updates the story.**  

```
    function Prologue(){
//Narrative Goes Here
    document.getElementById("bigtext").innerHTML = "STORY HERE";        
//Options/Inputs go Here
    document.getElementById("Option1").innerHTML = "CONTINUE";  
    document.getElementById("Option2").innerHTML = "";
    document.getElementById("Option3").innerHTML = "";  

//Entrance animations go here
$("#bigtext").delay(1500).fadeToggle(1000); 
$("#optionsbox").delay(2000).fadeToggle(1000);  

//On Option Clicked

//Option 1
$('#Option1').mouseup(function() { 
$("#bigtext").fadeToggle(1000); 
$("#optionsbox").fadeToggle(1000);  
     setTimeout(Prologue2, 1500);
    });

        }

```

I repeat this for each "page" of the story, so Prologue2 is the next function or "page".  

 **Here is my HTML, which I would like to keep as it's quite streamlined (to my eyes anyway)**  

```
<div id="bigtext"> </div>
<div id="optionsbox"> 
<span id="Option1"></span> <br/>
<span id="Option2"></span> <br/>
<span id="Option3"></span> <br/>
</div>

```

I've found that by the time I get to "Prologue2", it's calling not only "Prologue3" when I click on the option, but also "Prologue2" again as I have previously used the same button to designate that function. Is there a better way in which I could go about this or somehow remove the previous function after it has been used?