Populating two dropdown menus in one loop Javascript

I'm trying to populate two dropdown menus in Javascript with numbers within the same for loop, but only one is ever populated (the last one)

for (var i=1; i<10; i++)
{
   var option = document.createElement("option");
   option.text = i; 
   option.value = i;        
   document.getElementById('first').options.add(option);
   document.getElementById('second').options.add(option);               
}

The element 'second' will get populated, where as the other will not, if I put 'second' above 'first' then 'first' will be 开发者_StackOverflow社区populated.

How can I do this without using two for loops? I have tried passing the ID via a function to the loop and I still get the same output.

Thanks.

Little modification in your script

for (var i=1; i<10; i++)
{
   var option = document.createElement("option");
   option.text = i;
   option.value = i;   
   var newOption = option.cloneNode(true);   

   document.getElementById('first').options.add(option);
   document.getElementById('second').options.add(newOption);               
}