I created some pretty fun and simple forms today, mainly focusing on design and layout with some JavaScript/DOM type behaviors.

Worked great, then I duplicated the bottom form.

The calculations do not work in the bottom form. What do I need to do to make the function reusable? Thanks in advance!

<script type="text/javascript">
function ConjunctionJunction(){
var strInputSize = document.getElementById("inputSize").value;
strInputSize = strInputSize * 0.03937 + " inches"; // 0.03937 is is inches the length of 1mm.

var writeToElement = document.getElementById("WriteCalculation");
writeToElement.value = strInputSize;
}
</script>
</head>
<body>

<div>
<div id="container">
<form>
<fieldset>
<legend> &nbsp;SMC Calculator&nbsp; </legend>
<h2>Convert Millimeters to Inches</h2>
<label for="inputSize">Number of millimeters</label>
<input type="text" size="30" id="inputSize"> <input class="red" type="button" onclick="ConjunctionJunction();" value="Convert to Inches"><br/>
<label for="WriteCalculation">Number of inches</label>
<input type="text" size="30" id="WriteCalculation"><br/>
</fieldset>
</form>
</div>
</div>
<br/>
<br/>

<div>
<div id="container">
<form style="margin: 12px;">
<fieldset>
<legend> &nbsp;SMC Calculator&nbsp; </legend>
<h2>Convert Millimeters to Inches</h2>
<label for="inputSize">Number of millimeters</label>
<input type="text" size="30" id="inputSize"> <input class="red" type="button" onclick="ConjunctionJunction();" value="Convert to Inches"><br/>
<label for="WriteCalculation">Number of inches</label>
<input type="text" size="30" id="WriteCalculation"><br/>
</fieldset>
</form>
</div>
</div>