jQuery populate dynamic created select box from an

Question

I have a form where you can dynamically add new rows via jQuery. It creates the elements fine. However, I have a select box on the new row. When it is created, it is empty. I need to populate it from the first select box of that type (class).

Here is the HTML...

<select class="cyclePoSelect" name="poNumber[]" style="WIDTH: 100px">
  <option value="0" selected="">Select One</option>
  <option value="VE-13475">VE-13475</option>
  <option value="VZ-61300">VZ-61300</option>
</select>

<select class="cyclePoSelect" name="poNumber[]" style="WIDTH: 100px">
  <option value="0" selected="">Select One</option>
  <option value="VE-13475">VE-13475</option>
  <option value="VZ-61300">VZ-61300</option>
</select>

<!-- This is the dynamically created element -->
<select class="cyclePoSelect" name="poNumber[]" style="WIDTH: 100px">
  <option value="0" selected="">Select One</option>      
</select>

I need to add the 2 options from the first select to the last select. Adding them should be no problem. But I can't seem to get a list of options from just the first select box. So far, I have tried...

$(".cyclePoSelect > option:first").each(function() {
    alert(this.text + ' ' + this.value);
});

That just gives me the "Select One" option.

$(".cyclePoSelect > option").each(function() {
    alert(this.text + ' ' + this.value);
});

That gives me all options, but from BOTH existing select boxes.

jsFiddle - http://jsfiddle.net/scott80109/tkok9vwy/

Answer 1

$(".cyclePoSelect:last").html($(".cyclePoSelect:first").html())

Answer 2

$(".cyclePoSelect:last").html($(".cyclePoSelect:eq(0)").html());

Reference:

• :last
• :eq