如何使用ajax将文本输入字段附加到表单而不丢失表单上的用户输入？

I've been searching the internet and StackOverflow for a solution, but I haven't come up with one yet. I have a form to start with:

<div class="container_12">
<div id="masthead" class="grid_12">
<br/><h1>Form Builder</h1>      
</div>
<div id="main-content" class="grid_8" style="margin-top:-5px">
    <form action="" id="form" name="form">
        <div id="formbuilder" name="formbuilder">
        <label>Question:</label><input type="text" name="question1" id="question1"/><br/>
        </div>

        <button type="button" onClick="loadXMLDoc()">Add New Question</button>
        <input type="submit" name="submit" id="submit"/>
    </form>
</div>
<div id="sidebar" class="grid_4">
</div>

When the "Add New Question" button is pressed, it executed this javascript:

    var count = 1; //only executed once on the initial load.
function loadXMLDoc() //executed every time the button is pressed.
{
    count++;
    var xmlhttp;
    if(window.XMLHttpRequest)
    {//code for anything better than IE6
    xmlhttp=new XMLHttpRequest();
    }
    else
    {//IE6 or lower
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("formbuilder").innerHTML += xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "question.php?c=" + count, true);
    xmlhttp.send();
}

That javascript is in turn getting a new input field from question.php, which is a very simple php script:

   <?
    echo '<label>Question:</label><input type="text" name="question'.$_GET['c'].'" id="question'.$_GET['c'].'"/><br/>';
   ?>

Now, everything is working fine at first glance. When I press the button, a new question field is generated and appended to the form. However, if I were to have any values in any of the question text boxes prior to pressing the button, all that data disappears, even though intuitively, that shouldn't be the case. To add to the fun, this only happens in Chrome and Firefox. For some reason Internet Explorer 9 works as intended.

Clearly I'm doing something wrong, but I can't figure out what it may be. I haven't worked with AJAX in quite some time, and would appreciate any help on this one. Thanks!

Instead of using innerHTML you can use insertAdjacentHTML at least in Chrome and Firefox.

document.getElementById("formbuilder").insertAdjacentHTML("beforeend", xmlhttp.responseText)