How do I delete or clear data that has been copied to a different text box?

I am building a simple calculator that adds two numbers and displays the result in a different box. I have figured out how to copy text from one box and display it in another, but I am stuck on how to clear it. The data from the original textboxes will clear, but not from the textboxes in the display box. Below is the code for the html, css, and js files.

 function startOver() {
	    document.demo_form.txt1.value="";
	    document.demo_form.txt2.value="";
	    document.demo_info.txtresult.value="";
	    document.getElementById("demo_info").innerHTML="";
        }

 
        function copy() {
	    var txt1 = document.getElementById("txt1");
	    var field1 = document.getElementById("field1");
	    field1.value=txt1.value;
        var txt2 = document.getElementById("txt2");
	    var field2 = document.getElementById("field2");
	    field2.value=txt2.value;
        }
 
 
        function calculate(){
	    var q=parseInt(document.getElementById("txt1").value);
	    var w=parseInt(document.getElementById("txt2").value);

	    var result=q+w;
		if(isNaN(q)||isNaN(w)){
        alert("please enter a number");
		}
		else
        {
		var result=q+w;
		
        document.getElementById("txtresult").value=result;
        }
        }

        #container {
	    width:650px;
	    height:450px;
	    margin:0px auto;
	    padding:10px;
	    background-color:white;
	    border:1px solid black;
        }

        #demo_src {
	    float: left;
	    width: 250px;
	    height: 220px;
	    margin-bottom: 10px;
	    border: 1px solid blue;
	    }

        #demo_info {
	    float: right;
	    width: 350px;
	    height: 220px;
	    margin-bottom: 10px;
	    border: 1px solid orange;
        }

        #table_header {
	    clear: both;
	    width: 649px;
	    height: 50px;
	    border: 1px solid black;
        }

        #table {
	    overflow: auto;
	    width: 649px;
	    height: 20px;
	    border: 1px solid black;
        }

        #table {
	    align: center;
	    font-family: Sans-serif;
	    font-size: 13px;
        }

		<div id="container">
		<h2>Simple Calculator</h2>
		<div id="demo_src">
		<form name="demo_form">
		<table style=margin:10px;>
		<tr>
		<td>Enter the First Number:</td>
		<td><input type = "text" name="txt1" id="txt1" size = "10"/></td>
		</tr>
		<tr>
		<td>Enter the Second Number:</td>
		<td><input type = "text" name="txt2" id="txt2" size = "10"/></td>
		</tr>
		<td><input type="button" value="Add" onclick="calculate(); 
        copy()"/></td>
		<td><input type = "button" onclick = "startOver()"   
        value = "Start Over"/></td>
		</table>
		</form>
		</div>
		<div id = "demo_info">
		<table style=margin:10px;>
		<tr>
		<td>Field 1:</td>
		<td><input type="text" name="field1" id="field1" size="15"/></td>
		</tr>
		<tr>
		<td>Field 2:</td>
		<td><input type = "text" name="field2" id="field2" size = "15"/></td>
		</tr>
		<tr>	
 		<td>Result: </td>
		<td><input type="text" id="txtresult" size="10"></td>
		</tr>
		</table>			
		</div>
		</div>
        </body>
        </html>