How can I show my connected clients to the new client in socket.io?

Question

I am currently doing socket.io project. When I connect to new socket it shows my input username on the "usersDiv" where all clients should be there. But the thing is when I open another tab and input my name, it only has the name of the new client but when I switch to the other tab 2 client names are there. the new client doesn't show recent connected client input.

Here is my Code:

app.js(server)

const app = express();
const socket = require('socket.io');
const server = app.listen(8001, function(){
    console.log('listening to port 8001')
});
const io = socket(server);
app.use(express.static('./views'));

app.set('views','./views');
app.set('view engine','ejs');
app.get('/', function(req, res){
    res.render('index');
});

io.on('connection', function(socket){
    console.log('Made Connection');


    socket.on('username', function(data){
        let users = [];
        users.push(data.userName);
        io.emit('joined', users)
        
    });
});

client.js(client)

let username = prompt('What is your username?');
let usersDiv = document.getElementById('users');
let container = document.getElementById('container');
let socket = io();
let clear = document.getElementById('clear');
let circle = document.createElement('div');
    

    socket.emit('username', {
        userName: username
    })

    socket.on('joined', function(data){
        usersDiv.innerHTML += data + '<br>';
    })

Answer 1

As Chris G pointed out you need to declare let users = []; outside of the event handler connection.

For an example in app.js using sockets with a express server:

const express = require('express');
const app = require('express')();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

app.use(express.static("public"));
app.set('view engine','ejs');

app.get('/', function(req, res){
    res.render('index');
});

let users = [];

io.on('connection', function(socket) {
  console.log('Made Connection');

  socket.on('username', function(data) {
    io.emit('joined', users);
    users.push(data.userName);
  });
});

const listener = server.listen(process.env.PORT, () => {
  console.log('app is running on port ' + listener.address().port);
});

Then for client side you can create path like: public/client.js

let username = prompt('What is your username?');
let usersDiv = document.getElementById('users');
let container = document.getElementById('container');
let clear = document.getElementById('clear');
let circle = document.createElement('div');
let socket = io.connect();

socket.emit('username', {
  userName: username
});

socket.on('joined', function(data) {
  usersDiv.innerHTML = data.join('<br>');
});

Also you need to be careful using html when you are appending the username or messages someone could do a xss attack.