I'm pretty new to express and socket.io and I'm trying to achieve a little website:

**What is it supposed to do:**

* You can connect to the website and enter a username
* You have to select a column where you want to write (it's stored in `var column`)
* Once on the page with the four column, you can see your username at the top of your column and start doing things there.
* The other users see you in the correct column.

[![enter image description here](https://i.stack.imgur.com/QIQ6M.jpg)](https://i.stack.imgur.com/QIQ6M.jpg)

**What it is not doing:**

Actually the three points above are working quite well, my issue is with the last point :

* The other users see you in the correct column.

My code is somehow not displaying every user in the correct column, in fact, it's displaying them in **the same column as you are**

[![enter image description here](https://i.stack.imgur.com/3lKSx.jpg)](https://i.stack.imgur.com/3lKSx.jpg)

Here is the code

```
$(document).ready(function () {
var socket = io();
var username = prompt("premier utilisateur : ", "nom");
var column = prompt("colonne ", "1,2,3 ou 4");
var gdhb = "";

socket.emit("new user entered his name");
socket.emit("nomUser", username);

if (column === "1") { column = ".one"; gdhb = ".dir1" }
if (column === "2") { column = ".two"; gdhb = ".dir2" }
if (column === "3") { column = ".three"; gdhb = ".dir3" }
if (column === "4") { column = ".four"; gdhb = ".dir4" }

socket.emit("user chose a column");
socket.emit("columnUser", column);

$(column).append($("<p class='username'>" + username + "</p>"))
$(document.body).click(function (b) {

    var verbes = [
        "appuie",
        "bouscule",
        "pousse"
    ];

    var adverbes = [
        "puis",
        "ensuite",
        "pour finir",
        "alors"
    ];

    var verbe = verbes[Math.floor(Math.random() * verbes.length)];
    var adverbe = adverbes[Math.floor(Math.random() * adverbes.length)];
    var verbadv = verbe + " " + adverbe;
    console.log(verbadv);

    socket.emit("verbadverbe");
    socket.emit("verbadv", verbadv);

    var div = $("<div />", {
        "class": "document"
    })
        .css({
            "left": b.pageX + 'px',
            "top": b.pageY + 'px'
        })
        .append($("<p>" + verbadv + "</p>"))
        .appendTo(column);
});

$(document.body).contextmenu(function (rc) {
    var div = $("<div />", {
        "class": "document"
    })
        .css({
            "left": rc.pageX + 'px',
            "top": rc.pageY + 'px'
        })
        .append($("<p>recule</p>"))
        .appendTo(column);
});

var direction = "";
var oldx = 0;
var oldy = 0;
mousemovemethod = function (e) {

    if (e.pageX > oldx && e.pageY == oldy) {
        direction = "gauche";
    }
    else if (e.pageX == oldx && e.pageY > oldy) {
        direction = "bas";
    }
    else if (e.pageX == oldx && e.pageY < oldy) {
        direction = "haut";
    }
    else if (e.pageX < oldx && e.pageY == oldy) {
        direction = "droite";
    }

    $(gdhb).append($("<p class='direction' id='direction'>" + direction + "</p>"))
    $(".direction").prev().remove();

    oldx = e.pageX;
    oldy = e.pageY;
}
document.addEventListener('mousemove', mousemovemethod);

socket.on("columnUser", function (column) {
    socket.on("nomUser", function (username) {
        $(column).append($("<p class='username'>" + username + "</p>"));

        socket.on("verbadv", function (verbadv) {
            var div = $("<div />", {
                "class": "document"
            })
                .append($("<p>" + verbadv + "</p>"))
                .appendTo(column);
        });
    });
});
});

```

and the index.js :

```
const path = require('path');
const http = require('http');
const express = require('express');
const socketio = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketio(server);

app.use(express.static(path.join(__dirname, 'public')));

io.on('connection', (socket) => {
    console.log('Nouvel utilisateur')

    socket.on("nomUser", (username) => {
        console.log(username);
        io.emit("nomUser", username);
    });
    socket.on("verbadv", (verbadv) => {
        console.log(verbadv);
        io.emit("verbadv", verbadv);
    });

    socket.on("columnUser", (column) => {
        console.log(column);
        io.emit("columnUser", column);
    });

});

server.listen(3000, () => {
 console.log('listen on 3000');
})

```

Also if it's needed to understand better, here is the css

```
body {
    font-family: sans-serif;
    font-size: 1.3rem;
    margin: 0;
    background-color: DarkSlateGray;
  }

  .wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0px;
    grid-auto-rows: minmax(100vh, auto);
    height: 100vh;
  }

  .one,
  .two,
  .three,
  .four {
     -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
    position: relative;
    overflow: scroll;
    height: 100%;
    background-color: tan;
  }

  .one {
    grid-column: 1 / 2;
  }

  .two {
    grid-column: 2 / 3;
  }

  .three {
    grid-column: 3 / 4;
  }

  .four {
    grid-column: 4 / 4;
  }

  .one::-webkit-scrollbar, 
  .two::-webkit-scrollbar, 
  .three::-webkit-scrollbar, 
  .four::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
  }

  .note {
    text-align: center;
    width: 100px;
    height: 30px;
  }

  .note p{
    filter: drop-shadow(0 0 0.75rem black);
  }

  .document{

    text-align: center;
  }
  .document p{
      padding: 0;
     margin: 0;
  }

  .username{
    text-align: center;
      padding: 0;
     margin: 0;
  }

  .direction{
    position: fixed;
    bottom : 0;
    width: 25vw;
    text-align: center;
  }

```

Thanks a lot for the precious help.