javascript - How to update count of number of appended divs -

i'm building socket chat program, everytime joining chat room, badge showing number of users, should increase. code below function adds new user's name list of users. new name added div id="elementinpeople. problem badge displaying 1, though multiple users have entered chat. suggestions how 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);             });     }); 

server-side:

socket.on("connection", function(client) { client.on("join", function(name){     console.log("someone joined chat");     people[client.id] = name;     client.emit("updatetoself", "you have connected server. join or create room chat");     socket.sockets.emit("update-people", people);     client.broadcast.emit('updatetoothers', name + " has joined server."); }); 

there no need search dom quantity available data.

it appears people object object.keys(people).length can give count

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