Question

I’m trying to append every new <option> to the select field, but I seem to be getting multiples after the first submission.

Any help is appreciated.

<input id="name" placeholder="name">
<input id="phone" placeholder="phone">
<button id="submit">Submit</button>

and

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

    var len = users.length;

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

Heres a fiddle : http://jsfiddle.net/Buttery/5dQhj/3/

Currently outputs

Terry
Gus
Gus
Foo
Foo
Foo

Answer 1

When you click your button, you’re appending the new addition to the original data source, then looping over the original data source and re-adding each one, creating duplicates, try this:

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

    $("<option value=" + userData.phone + ">" + userData.name + "</option>").appendTo(select);
});