Dynamic form updating - was working yesterday

[Beauford]

This script was working yesterday, now I get a javascript error on line 32 character 2. Which is always the line after this: function doMath() {

This is the code. Any help is appreciated as I just miffs me how it can just stop working when nothing has been changed.

Thanks

<script language="JavaScript">
function doMath() {
	var parts_total = parseFloat(document.getElementById('parts_input').value);
    var labour = parseFloat(document.getElementById('labour_input').value);
    var misc = parseFloat(document.getElementById('misc_input').value);
    var subt = parseFloat(parts_total) + parseFloat(labour) + parseFloat(misc);
	var subtotal = subt.toFixed(2);
    var tax = parseFloat(subtotal * .13);
	var hst = tax.toFixed(2);
    var tot = parseFloat(subtotal) + parseFloat(hst);
	var total = tot.toFixed(2);

    document.getElementById('subtotal_input').value = subtotal;
    document.getElementById('hst_input').value = hst;
    document.getElementById('total_input').value = total;
}
</script>

				<div>Total Parts&nbsp;<input id='input' type="text" name="parts_total" id="parts_input" value="<? echo number_format($r1['ext'],2); ?>" style="width: 120px; text-align: right" readonly="true" /></div>
				<div class="t">Labour&nbsp;<input type="text" name="labour" id="labour_input" value="<? echo number_format($r1['labour'],2); ?>" style="width: 120px; text-align: right" onblur="doMath();" /></div>
				<div class="t">Misc&nbsp;<input type="text" name="misc" id="misc_input" value="<? echo number_format($r1['misc'],2); ?>" style="width: 120px; text-align: right" onblur="doMath();" /></div>
				<div class="t">Sub Total&nbsp;<input id='input' type="text" name="subtotal" id="subtotal_input" value="<? echo number_format($r1['subtotal'],2); ?>" style="width: 120px; text-align: right" readonly="true" /></div>
				<div class="t">HST&nbsp;<input id='input' type="text" name="hst" id="hst_input" value="<? echo number_format($r1['hst'],2); ?>" style="width: 120px; text-align: right" readonly="true" /></div>
				<div class="t">Total&nbsp;<input id='input' type="text" name="total" id="total_input" value="<? echo number_format($r1['total'],2); ?>" style="width: 120px; text-align: right" readonly="true" /></div>

[Beauford]

Found the problem, which brings up another question. I had two ID='s in the same input.

My question is this then. The one ID was for CSS formatting, while the other is used by the javascript function. How do you seperate the two as they do provide different functions. I can change the ID= to class= but just for reference I would like to understand this.

Thanks