I'm trying to select a specific option within a select element that has not yet been added to the DOM, but it does not seem to be working. Is what I'm trying to do not possible?

I would like to click the "Add Select" button, and see a new select element added to the DOM with the "0" option selected.

Here's a 

[JsFiddle](http://jsfiddle.net/flyingL123/Lm7d714q/1/)
------------------------------------------------------

**HTML**

```
<div id="container">
    <select class="mySelect">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2" selected>2</option>
    </select>
</div>

<button id="addSelect">Add Select</button>

```

**JS**

```
$(document).ready(function() {
    var $template = $('.mySelect').first().clone(),
        $container = $('#container');

    $template.find('option').each(function(i, option) {
       $(option).prop('selected', false); 
    });

    $('#addSelect').click(function(e) {
        e.preventDefault();
        $container.append($template.clone());
    });
});

```

As you can see in the fiddle, the new select is added but it has the "2" option selected.

I also tried resetting the select with `$template.val('0')`, but that did not work either. The select still appears with the "2" option selected.