JavaScript: Why is the new dropdown not being filled with values
<pre><code>Here is my code:

        &lt;script language="javascript"&gt;
        var counter =0,temp,m,cloneNodem;
        function  getVtierDefList(){
            var vtierDefList =  var vtierDefList =  [{"label":"d1nis1w20","value":"28914"},{"label":"d1nis1m13","value":"28915"},{"label":"d1nis2d9","value":"28661"},{"label":"d1nis3d1","value":"28916"},{"label":"d1nis1a1","value":"27238"},{"label":"d1nis1a13","value":"28917"},{"label":"s2nis1d0","value":"28660"},{"label":"s2nis1a0","value":"28659"},{"label":"t3nis1d0","value":"27237"}];;
            return vtierDefList;
        }
        &lt;/script&gt;
        &lt;/head&gt;
        &lt;body onload="load();"&gt;
        &lt;div id="doc"&gt;
        &lt;div id="main"&gt;
        &lt;table id="vtier#1"&gt;
            &lt;tr&gt;
                &lt;td&gt;&lt;button  onclick="delVtier(this);return false;" /&gt;&lt;/td&gt;
                &lt;td&gt;1.Vtier Name:   &lt;select id="vtier" name="vtierSelect" onchange="doAjax(this);return false;"&gt;
                    &lt;option selected="selected" value="-1"&gt;Any&lt;/option&gt;
                &lt;/select&gt;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
        &lt;div id="accountarea" &gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="plus"&gt;&lt;button onclick="addVtier();return false;"/&gt;&lt;/div&gt;

        &lt;/body&gt;
        &lt;/html&gt;
     &lt;script language="javascript"&gt;
    function addVtier() {
             m = document.getElementById("main");
         cloneNodem = m.cloneNode(true);    
        temp = cloneNodem.cloneNode(true);
        document.getElementById("main").appendChild(temp);
                counter++;
        fillDropDown(counter);
    }
    function load() {
         var vtierSelectedList = document.getElementsByName("vtierSelect");
         addDropDownValues(getVtierDefList(), vtierSelectedList[0],"-1");
         }
        function addDropDownValues(Elements,DropDwn,SelectID)
        {   if(DropDwn.options){
                DropDwn.options.length = 1
                  }
            for(var i=0;i&lt;Elements.length;i++)
            {
                var addOption = new Option();
                addOption.value = Elements[i].value;
                addOption.innerHTML = Elements[i].label;
                if(addOption.value == SelectID)addOption.selected = true;
                DropDwn.appendChild(addOption);
            }
        }
    function fillDropDown(dropDwn) {

        var vtierSelectedList = document.getElementsByName("vtierSelect");
        vtierSelectedArray = new Array(vtierSelectedList.length);
        var vtierDefList = getVtierDefList();
        for(var k=0;k&lt;vtierSelectedList.length;k++) {
        vtierSelectedArray[k] =vtierSelectedList[k].options[vtierSelectedList[k].selectedIndex].value ;

        }
        var diff = diffArray(getVtierDefList(), vtierSelectedArray);
        addDropDownValues(diff,vtierSelectedList[dropDwn],"-1");
}
// this function diffArray just finds the difference between the two arrays
function diffArray(a, b) {
        var seen = [], diff = [];
        for ( var i = 0; i &lt; b.length; i++)
            seen[b[i]] = true;
        for ( var i = 0; i &lt; a.length; i++)
            if (!seen[a[i].value])
                diff.push(a[i]);
        return diff;
    }
    &lt;/script&gt;
</code></pre>

<p>Now my question is when this code fills the dropdown list for the first dropdown why does it not fill the dropdown list for the subsequent dropdowns with the new calculated array not having the already selected elements in the dropdowns boxes ? </p>
