I've been struggling with this for two days and I've tried so many things that I has to completely start over with my original code backup. So any help will be greatly appreciated. I am using an onchange event to call three different dropdown lists depending on which of three types of fabric is chosen on my form. I need to call this same javascript function up to 5 different times on the same page, so i put the javascript function in an external javascript file but I but I haven't been able to call it using the onchange

my original code had all five functions (all named different but they all did the same) that didn't work either.

Here is my original code for the first 2 I need to do this a total of 5 times on the same page

<td class="p">Select your Fabric Choice?<br />
<!-- 1st Section -->
<select name="product151stfabrictype" id = "opts" onchange = "showForm()">
<option value = "0">Select Fabric Type</option>
<option value = "1">Flannel Fabric</option>
<option value = "2">Fleece Fabric</option>
<option value = "3">Velboa Fabric</option>
</select>

<div id = "f1" style="display:none">
<form name= "form1">
<select name="product151stfabricflannel" id = "opts" onchange = "showForm()">
<option value = "0">Select Flannel</option>
<option value="fabric100">Fabric #100</option>
<option value="fabric101">Fabric #101</option>
<option value="fabric102">Fabric #102</option>
<option value="fabric103">Fabric #103</option>
<option value="fabric104">Fabric #104</option>
<option value="fabric105">Fabric #105</option>
<option value="fabric106">Fabric #106</option>
<option value="fabric107">Fabric #107</option>
</select>
</form>
</div>

<div id = "f2" style="display:none">
<form name= "form2">
<select name="product151stfabricfleece" id = "opts" onchange = "showForm()">
<option value = "0">Select Fleece</option>
<option value="fabric5">Fabric #5</option>
<option value="fabric6">Fabric #6</option>
<option value="fabric7">Fabric #7</option>
<option value="fabric8">Fabric #8</option>
<option value="fabric21">Fabric #21</option>
<option value="fabric23">Fabric #23</option>
<option value="fabric25">Fabric #25</option>
<option value="fabric28">Fabric #28</option>
</select>
</form>
</div>

<div id = "f3" style="display:none">
<form name= "form3">
<select name="product151stfabricvelboa" id = "opts" onchange = "showForm()">
<option value = "0">Select Velboa</option>
<option value="fabric209">Fabric #209</option>
<option value="fabric210">Fabric #210</option>
<option value="fabric211">Fabric #211</option>
<option value="fabric212">Fabric #212</option>
</select>
</form>
</div>

<script type = "text/javascript">
function showForm()
{
var selopt = document.getElementById("opts").value;
if (selopt == 1)
{
document.getElementById("f1").style.display="block";
document.getElementById("f2").style.display="none";
document.getElementById("f3").style.display="none";
}
if (selopt == 2)
{
document.getElementById("f2").style.display="block";
document.getElementById("f1").style.display="none";
document.getElementById("f3").style.display="none";
}
if (selopt == 3)
{
document.getElementById("f3").style.display="block";
document.getElementById("f1").style.display="none";
document.getElementById("f2").style.display="none";
}
}

</script>
</td>
<td width="15">&nbsp;</td>
<td class="p">Select your Fabric Choice?<br />
<!-- 2nd Section -->
<select name="product152ndfabrictype" id = "opts2" onchange = "showForm2()">
<option value = "0">Select Fabric Type</option>
<option value = "21">Flannel Fabric</option>
<option value = "22">Fleece Fabric</option>
<option value = "23">Velboa Fabric</option>
</select>

<div id = "f21" style="display:none">
<form name= "form21">
<select name="product152ndfabricflannel" id = "opts2" onchange = "showForm2()">
<option value = "0">Select Flannel</option>
<option value="fabric100">Fabric #100</option>
<option value="fabric101">Fabric #101</option>
<option value="fabric102">Fabric #102</option>
<option value="fabric103">Fabric #103</option>
<option value="fabric104">Fabric #104</option>
<option value="fabric105">Fabric #105</option>
<option value="fabric106">Fabric #106</option>
<option value="fabric107">Fabric #107</option>
</select>
</form>
</div>

<div id = "f22" style="display:none">
<form name= "form22">
<select name="product152ndfabricfleece" id = "opts2" onchange = "showForm2()">
<option value = "0">Select Fleece</option>
<option value="fabric5">Fabric #5</option>
<option value="fabric6">Fabric #6</option>
<option value="fabric7">Fabric #7</option>
<option value="fabric8">Fabric #8</option>
<option value="fabric21">Fabric #21</option>
<option value="fabric23">Fabric #23</option>
<option value="fabric25">Fabric #25</option>
<option value="fabric28">Fabric #28</option>
</select>
</form>
</div>

<div id = "f23" style="display:none">
<form name= "form23">
<select name="product152ndfabricvelboa" id = "opts2" onchange = "showForm2()">
<option value = "0">Select Velboa</option>
<option value="fabric209">Fabric #209</option>
<option value="fabric210">Fabric #210</option>
<option value="fabric211">Fabric #211</option>
<option value="fabric212">Fabric #212</option>
</select>
</form>
</div>

<script type = "text/javascript">
function showForm2()
{
var selopt = document.getElementById("opts2").value;
if (selopt == 21)
{
document.getElementById("f21").style.display="block";
document.getElementById("f22").style.display="none";
document.getElementById("f23").style.display="none";
}
if (selopt == 22)
{
document.getElementById("f22").style.display="block";
document.getElementById("f21").style.display="none";
document.getElementById("f23").style.display="none";
}
if (selopt == 23)
{
document.getElementById("f23").style.display="block";
document.getElementById("f21").style.display="none";
document.getElementById("f22").style.display="none";
}
}

</script>
</td>


I don't care if its external or internal just need to get it working. Thanks and this is my 1st time posting so if it's in the wrong place or I didn't give you enough info sorry.