So currently I have an HTML page where the user completes some data entry. Their data is spanned into a form on the page which they then copy and paste into a text file. I would like to include a button that would simply take the form, along with the spanned data, and save it to a text file. This will all be done locally, the user will have the HTML file saved on their computer. I have tried doing this via a textarea and a div but in both cases the text file doesn't include the actual user data but just the HTML code. Here as example of how the program works:

function example(){
   var elements = document.querySelectorAll(".showexample");
   for(var i = 0; i<elements.length; i++){
      elements[i].innerHTML = document.querySelector(".exampleinput").value;
   }
}

<TD><input type="text" class="exampleinput" oninput="example()"></TD>

<div id="forUserDownload">
your input:<span class='showexample'></span>
</div>

When I try to include a download function (such as the one here:https://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/), it just shows the HTML code instead of the actual user input. Is there anyway to do this with only HTML and Javascript?