javascript - Manipulating DOM of a specific socket using jQuery -

i'm trying make chat application socket.io , have 2 forms set up. 1 form username , other messages.

first, page show username form until receives input. username form disappear when user submits information. able access form using jquery $(this). however, make message form appear using show() after retrieve user connection.

the function looks this:

socket.on('user connected', function(msg){     $('#messages').append($('<li>').text(msg + " has connected"));     console.log($(this)) }); 

but noticed $(this) return socket node. how go retrieving message form of specific socket? if write $('form#message').show(), sockets reveal message form, not want.

this html body

    <ul id="messages"></ul>      <form id="user" action="">         <input id="user" autocomplete="off" />         <button>enter</button>         </input>     </form>      <form id="message" action="">         <input id="message" autocomplete="off" />         <button>send</button>         </input>     </form>