Two forms opening iFrame independently

I have a form which the user selects a tool kit by size (in metric) Firstly the length, then by width and it opens correct product URL in an iFrame within the page.

I'm trying to duplicate another form below it (with imperial measurements) which opens the same iFrame.

What changes do I need to make the second form work independently from the first? I've named the second form 'kits2' but the first form is effecting the second one. Here's the first form which works on it's own:

<form name="kits" class="txtblue20" id="kits">
           <select name="length" size="7" class="dropdown" style="width: 140px" onchange="updatewidth(this.selectedIndex)">
            <option selected="selected">Select Length</option>
            <option value="600">0-600mm</option>
            <option value="800">601-800mm</option>
            <option value="1000">801-1000mm</option>
            <option value="1200">1001-1200mm</option>
            <option value="2400">1201-2400mm</option>
            <option value="3050">2440-3050mm</option>
          </select>
          <select name="width" size="7" class="dropdown" style="width: 140px" onclick="window.open(this.options[this.options.selectedIndex].value,'myIFrame')">
          </select>
        </div>
      </div>
          </form>
            <script type="text/javascript">
 
var lengthlist=document.kits.length
var widthlist=document.kits.width

 
var width=new Array()
width[0]=""
width[1]=["Select Width|select-length-width.html", "0-600mm|600X600.html", "601-900mm|600X900.html", "901-1200mm|600x1200.html"]
width[2]=["Select Width|select-length-width.html", "0-600mm|800x600.html", "601-900mm|800x900.html", "901-1200mm|800x1200.html"]
width[3]=["Select Width|select-length-width.html", "0-600mm|1000X600.html", "601-900mm|1000X900.html", "901-1200mm|1000X1200.html"]
width[4]=["Select Width|select-length-width.html", "0-600mm|1200x600.html", "601-900mm|1200X900.html", "901-1200mm|1200X1200.html", "1201-1800mm|1200X1800.html", "1801-2400mm|1200X2400.html"]
width[5]=["Select Width|select-length-width.html", "0-600mm|2400X600.html", "601-900mm|2400x900.html", "901-1200mm|2400X1200.html"]
width[6]=["Select Width|select-length-width.html", "1200mm|3050x1200.html", "1500mm|3050x1500.html"] 

function updatewidth(selectedwidthgroup){
    widthlist.options.length=0
    if (selectedwidthgroup>0){
        for (i=0; i<width[selectedwidthgroup].length; i++)
            widthlist.options[widthlist.options.length]=new Option(width[selectedwidthgroup][i].split("|")[0], width[selectedwidthgroup][i].split("|")[1])
    }
}
        </script>          

When I duplicate the code underneath for the imperial measurements the two forms interact with each other.

This is my code with both forms on there:

<form name="kits" class="txtblue20" id="kits">
           <select name="length" size="7" class="dropdown" style="width: 140px" onchange="updatewidth(this.selectedIndex)">
            <option selected="selected">Select Length</option>
            <option value="600">0-600mm</option>
            <option value="800">601-800mm</option>
            <option value="1000">801-1000mm</option>
            <option value="1200">1001-1200mm</option>
            <option value="2400">1201-2400mm</option>
            <option value="3050">2440-3050mm</option>
          </select>
          <select name="width" size="7" class="dropdown" style="width: 140px" onclick="window.open(this.options[this.options.selectedIndex].value,'myIFrame')">
          </select>
        </div>
      </div>
          </form>
            <script type="text/javascript">
var lengthlist=document.kits.length
var widthlist=document.kits.width
 
var width=new Array()
width[0]=""
width[1]=["Select Width|select-length-width.html", "0-600mm|600X600.html", "601-900mm|600X900.html", "901-1200mm|600x1200.html"]
width[2]=["Select Width|select-length-width.html", "0-600mm|800x600.html", "601-900mm|800x900.html", "901-1200mm|800x1200.html"]
width[3]=["Select Width|select-length-width.html", "0-600mm|1000X600.html", "601-900mm|1000X900.html", "901-1200mm|1000X1200.html"]
width[4]=["Select Width|select-length-width.html", "0-600mm|1200x600.html", "601-900mm|1200X900.html", "901-1200mm|1200X1200.html", "1201-1800mm|1200X1800.html", "1801-2400mm|1200X2400.html"]
width[5]=["Select Width|select-length-width.html", "0-600mm|2400X600.html", "601-900mm|2400x900.html", "901-1200mm|2400X1200.html"]
width[6]=["Select Width|select-length-width.html", "1200mm|3050x1200.html", "1500mm|3050x1500.html"] 

function updatewidth(selectedwidthgroup){
    widthlist.options.length=0
    if (selectedwidthgroup>0){
        for (i=0; i<width[selectedwidthgroup].length; i++)
            widthlist.options[widthlist.options.length]=new Option(width[selectedwidthgroup][i].split("|")[0], width[selectedwidthgroup][i].split("|")[1])
    }
}
     </script>
<br>

<form name="kits2" class="txtblue20" id="kits2">
           <div id="CollapsiblePanel1" class="CollapsiblePanel">
                </div>
        <div class="CollapsiblePanelContent">
          <select name="length" size="7" class="dropdown" style="width: 140px" onchange="updatewidth(this.selectedIndex)">
            <option selected="selected">Select Length</option>
                 <option value="2'">0 - 2'</option>
                 <option value="2'8">2'1" - 2'8"</option>
                 <option value="3'4">2'9" - 3'4"</option>
                 <option value="4'">3'5" - 4'</option>
                 <option value="8'">4'1" - 8'</option>
                 <option value="10'">8'1" - 10'</option>
               </select>
          <select name="width" size="7" class="dropdown" style="width: 140px" onclick="window.open(this.options[this.options.selectedIndex].value,'myIFrame')">
          </select>
        </div>
      </div>
          </form>
            <script type="text/javascript">
 
var lengthlist=document.kits2.length
var widthlist=document.kits2.width

var width=new Array()
width[0]=""
width[1]=["Select Width|select-length-width.html", "0' - 2'|600X600.html", "2'1 - 2'8|600X900.html", "2'9 - 3'4|600x1200.html"]
width[2]=["Select Width|select-length-width.html", "0' - 2'|800x600.html", "2'1 - 2'8|800x900.html", "2'9 - 3'4|800x1200.html"]
width[3]=["Select Width|select-length-width.html", "0' - 2'|1000X600.html", "2'1 - 2'8|1000X900.html", "2'9 - 3'4|1000X1200.html"]
width[4]=["Select Width|select-length-width.html", "0' - 2'|1200x600.html", "2'1 - 2'8|1200X900.html", "2'9 - 3'4|1200X1200.html", "4' - 6'|1200X1800.html", "6' - 8'|1200X2400.html"]
width[5]=["Select Width|select-length-width.html", "0' - 2'|2400X600.html", "2'1 - 2'8|2400x900.html", "2'9 - 3'4|2400X1200.html"]
width[6]=["Select Width|select-length-width.html", "0' - 4'|3050x1200.html", "0' - 5'|3050x1500.html"] 

function updatewidth(selectedwidthgroup){
    widthlist.options.length=0
    if (selectedwidthgroup>0){
        for (i=0; i<width[selectedwidthgroup].length; i++)
            widthlist.options[widthlist.options.length]=new Option(width[selectedwidthgroup][i].split("|")[0], width[selectedwidthgroup][i].split("|")[1])
    }
}
        </script>

This might be really basic but would be a great help if someone could take a look. Thanks