JavaScript only performs function based off onClick event once?

I am working on a program that will output XML code for easy copy + pasting. I have check boxes set up and want the user to be able to check off certain values that will then output specific lines for the XML code. The issue is once they click the button once it will not do it again. Any ideas why?

Relevant JavaScript:

function add() {
if (document.getElementById("POTBDetail").checked) {
                if (document.getElementById("STT").checked) {       
                    TheTextBox.value = TheTextBox.value + '<xsl:variable name="POSalesTaxTotalVar" select="\'Y\'"/> \n';
                }
                else {
                    TheTextBox.value = TheTextBox.value + '<xsl:variable name="POSalesTaxTotalVar" select="\'N\'"/> \n';
                }
                //if they want discount total var showing
                if (document.getElementById("DT").checked) {        
                    TheTextBox.value = TheTextBox.value + '<xsl:variable name="PODiscountTotalVar" select="\'Y\'"/> \n';
                }
                else {
                    TheTextBox.value = TheTextBox.value + '<xsl:variable name="PODiscountTotalVar" select="\'N\'"/> \n';
                }
                //if they want credit total var showing
                if (document.getElementById("CT").checked) {        
                    TheTextBox.value = TheTextBox.value + '<xsl:variable name="POCreditTotalVar" select="\'Y\'"/> \n';
                }
                else {
                    TheTextBox.value = TheTextBox.value + '<xsl:variable name="POCreditTotalVar" select="\'N\'"/> \n';
                }
                //if they want freight total var showing
                if (document.getElementById("FT").checked) {        
                    TheTextBox.value = TheTextBox.value + '<xsl:variable name="POFreightTotalVar" select="\'Y\'"/> \n';
                }
                else {
                    TheTextBox.value = TheTextBox.value + '<xsl:variable name="POFreightTotalVar" select="\'N\'"/> \n';
                }
                //if they want freight total var showing
                if (document.getElementById("POLIT").checked) {     
                    TheTextBox.value = TheTextBox.value + '<xsl:variable name="POExtTotalVar" select="\'Y\'"/> \n';
                }
                else {
                    TheTextBox.value = TheTextBox.value + '<xsl:variable name="POExtTotalVar" select="\'N\'"/> \n';
                }
            }//end of if detail is checked
}//end of function

Relevant HTML:

<form name="input" method="get">
<h3>How do you want the information displayed in the Purchase Order Total Box at the
bottom of the page?</h3> 
<input type="checkbox" name="POTBDetail" id = "POTBDetail" value="Detail">Detail (Please check off all items you want displayed in the box) See Ply 1 – G of template for printed example<br>
<input type="checkbox" style = "margin-left:5em" name="POLIT" id = "POLIT" value="PO Line Item Total">PO Line Item Total<br>
<input type="checkbox" style = "margin-left:5em" name="CT" id = "CT" value="Credit Total">Credit Total<br>
<input type="checkbox" style = "margin-left:5em" name="STT" id = "STT" value="STT">Sales Tax Total<br>
<input type="checkbox" style = "margin-left:5em" name="DT" id = "DT" value="Discount Total">Discount Total<br>
<input type="checkbox" style = "margin-left:5em" name="FT" id = "FT" value="Freight Total">Freight Total<br>
<input type="checkbox" name="POTBTotal" id = "POTBTotal" value="Total">Show PO Total Only, no Detail Items See Ply 3 – C of template for printed example<br>
<input type="checkbox" name="POTBNone" id = "POTBNone" value="None">None – I don’t require a PO Total Box on this copy of the PO<br>
<h3></h3> 

<input type="button" value = "convert to text!" id = "button" onClick = "add()"/>
</br>
<textarea id = "output" style = "width:90%;height:40%;" onClick = "this.select();"></textarea>
</form>

As a side note it does work just as intended once, just only once. Thanks to all who help!