jQuery - Trying to append each new option to select
<p>I'm trying to append every new <code>&lt;option&gt;</code> to the <code>select</code> field, but I seem to be getting multiples after the first submission. </p>

<p>Any help is appreciated.</p>

<pre><code>&lt;input id="name" placeholder="name"&gt;
&lt;input id="phone" placeholder="phone"&gt;
&lt;button id="submit"&gt;Submit&lt;/button&gt;
</code></pre>

<p>and 
    </p>

<pre><code>$("button").on("click", function(){
    userData.name = $("#name").val();
    userData.phone = $("#phone").val();
    users.push(userData);

    var len = users.length;

    for (var i = 0; i &lt; len; i++) {
        $("&lt;option value=" + users[i].phone+ "&gt;" + users[i].name + "&lt;/option&gt;").appendTo(select);
    }
});
</code></pre>

<p>Heres a fiddle : <a href="http://jsfiddle.net/Buttery/5dQhj/3/" rel="nofollow">http://jsfiddle.net/Buttery/5dQhj/3/</a></p>

<p>Currently outputs</p>

<pre><code>Terry
Gus
Gus
Foo
Foo
Foo
</code></pre>
