How to update count of number of appended divs

I'm building a socket chat program, where everytime someone is joining the chat room, a badge showing the number of users, should increase. The code below is the function that adds the new user's name to the list of users. The new name is added as a div with the id="elementInPeople. My problem is that the badge is only displaying 1, even though multiple users have entered the chat. Any suggestions to how I can fix this?

socket.on("update-people", function(people){
            $("#people").empty();
            $.each(people, function(clientid, name) {
                $people.append('<div id="elementInPeople">' + name + '</div>');
                var np = $("#elementInPeople").length;
                $("#numberOfPeopleOnline").text(np);
            });
    });

via JonasSH