How can I restore the original text after it has been translated with micorosoft translator api

I have been able to translate a paragraph from English to Spanish using the Microsoft translator API with an AJAX call when a user clicks a button on my webpage. I would like to give them the ability to toggle back to the original text without having to translate the Spanish text back to English. When I view the page source I can see the original text, but I am not sure how to display that back to the user.

function Translate()
{
  var from = "en", to = "es", text = $('.Translate').text();
  
  var s = document.createElement("script");
  s.src = "http://api.microsofttranslator.com/V2/Ajax.svc/Translate" +
      "?appId=Bearer " + encodeURIComponent(window.accessToken) +
      "&from=" + encodeURIComponent(from) +
      "&to=" + encodeURIComponent(to) +
      "&text=" + encodeURIComponent(text) +
      "&oncomplete=MyCallback";
  document.body.appendChild(s);
}

function MyCallback(response)
{
  $('.Translate').text(response);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnTranslate" onclick="Translate()" class="etsButton">Translate</button>
<button id="btnRestore" onclick="Restore()" class="etsButton">Restore</button>

<div style="padding:10px;" class="Translate">
To be, or not to be: that is the question:
Whether 'tis nobler in the mind to suffer
The slings and arrows of outrageous fortune,
Or to take arms against a sea of troubles,
And by opposing end them? 
</div>

Solution

Viewing the page source does not show you the current HTML for the page. The problem is that your line $('.Translate').text(response); destroys the original text that was on your page.

If you want to be able to switch back, then you need to put the translated text into a new div. Then you can just show and hide the divs to toggle between the displayed version.