Clicking on a user's name on a list, won't add person's name to div

I have build a basic socket chat program. When people login, their names get added to a list of online users (On the left). When users click on one of the other online users, the name should append to a div on the top. But as you see it displays: div class="well">null (Top right). It seems that the server isn't catching the name of the person on the list. What am I missing?

Here's a image of what the chat looks like

Client-side:

//Whispering
    $("#people").on('click', '.list-group-item', function(){
      var peopleName = $(this).siblings("span").text();
      var peopleID = $(this).attr("id");
      socket.emit("whispering", peopleID);      
    });

    socket.on("addWhispering", function(id) {
      $(".chatToInfo").empty();
      $(".chatToInfo").append('div class="well">' + id + '</div>');
    });  

Server-side:

    client.on("whispering", function(id) {
    var person = people[id];
    client.emit("addWhispering", person);

    console.log("Whisper caught");
});

via JonasSH