Why is Jquery returning the wrong length?

Question

I'm using this code to add an element to a form. Then I count the total number of elements with that class. However, Jquery .length returns the number of elements times two.

Any ideas what I'm doing wrong?

$(function () {
    function updateWeight() {
        var z = $("input.count").length;
        alert(z);
    }
    $("#addCatalogItem").autocomplete({
        source: function (request, response) {
            $.getJSON("inventory_auto_complete.php", {
                term: request.term,
                supplier_id: $('#supplier_id').val()
            }, response);
        },
        minLength: 2,
        select: function (event, ui) {
            var q = ui.item.product_id;
            $('#product_id').val(q);
            var r = ui.item.value;
            $('#product').val(r);
            var field = '<label>' + r + '</label><input class=\"count\" type=\"text\" value=\"\" name=\"field[' + q + ']\"/>';
            var $item = $("form");
            $(field).appendTo($item);
            updateWeight();
        }
    });
});

HTML

<form>
    <input type="hidden" id="supplier_id" value="1"/>
    <input id="addCatalogItem"/>
</form>

Answer 1

var $item = $("form"); would take all the form in the page. Maybe you got some other form somewhere in the page.

simple test case of Yi Jiang shows that your code should work perfectly.

Here's a test case that demonstrate same result as your problem.

My suggestion is you give the form an id then use it as the selector, var $item = $("#formID"); .