Looking for suggestions on how to clear the textbox(es) when an HTML form is cleared. Here is the JS code that is run onclick:

 var counter = 0;
    function moreField() {
        counter++;
        var newFields = document.getElementById('readroot').cloneNode(true);
        newFields.id = '';
        newFields.style.display = 'block';
        var newField = newFields.childNodes;
        for (var i = 0; i < newField.length; i++) {
            var theName = newField[i].name
            if (theName)
                newField[i].name = theName + counter;
        }

        var insertHere = document.getElementById('writeroot');
        insertHere.parentNode.insertBefore(newFields, insertHere);
    }

I have tried doing a getelementbyId and trying to assign the newly created textbox a value of "" but that did not seem to work. Here is the HTML code that creates the form that is cloned:

<div class="InfoPanel">
            <div id="readroot" style="display: block">
                <br />
                    <asp:TextBox ID="txtHeadline" Columns="70"  MaxLength="200" runat="server" />
                    <textarea id="txtReview" rows="5" cols="70" name="review"></textarea>           
                <br />
<input type="button" value="[Delete]" id="btnDeleteDetail" style="display: block; margin:auto; text-decoration:underline; text-align: right; border:none; cursor:pointer; color:#412C82; "  onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
            </div>
            <form method="post" action="#">
                <div id="writeroot"></div>
            </form>
                <asp:Button ID="btnAddDetail" autopostback="false" Text="Add Detail" CssClass="formbutt" OnClientClick="moreField();return false;" runat="server" />
            <br />
        </div>

As it currently sits, running this code duplicates the form just fine but any text entered into the first form will be included in any subsequent forms. Thanks for the help in advance.