Dynamically update table rows with SocketIO

Question

My intent: Build makeshift queue-ing system backed by socketIO. I am dynamically populating my table. Each row has a unique identifier. I thought it was as simple as once a user clicks a button on a given row, to send a socket emit event to the server and then have the server send an emit event back to the client side and whosoever was listening for that particular event, it would remove that row for them.

What actually Occurs: The socket workflow works, however it will ONLY remove the button on the person's browser who selected it. It does not send the emit event to EVERYONE in the room. The way I have designed it, is that anyone who visits that page joins a room called, "queue_room". My idea behind this was so that anyone in this room, would all receive the same updates in realtime. You will also see that I am testing with trying to remove row_0, which represents a particular row, but still it does not work as intended..

My overarching goal is build out a realtime queue-ing system, but this is not working out well in my favor.

My ask: Can someone please help me resolve this issue and/or is there another suggested direction that you all recommend? Also, I am using MONGODB, as my backend database if that is at all helpful. Thanks!!

CLIENT SIDE TABLE(JADE):

div(class= "the_results", style = "text-align: center;")
            table.table.table-striped.table-dark
                thead
                    tr
                        th(scope='col')
                        th(scope='col') Name
                        th(scope='col') Email
                tbody
                    - var n = 0
                    - var x = 0
                    for item in json
                            tr(id = 'row_#{x++}')
                                td
                                    button.btn.btn-primary.request_button_attributes(class = 'sendRequest', id='#{n++}' type = 'submit', value = '#{item.room}') Send Request
                                td #{item.name}
                                td #{item.email}


script(src="/socket.io/socket.io.js")
script.
    function removeRow() {
        $('#row_0').hide()
    }
    var socket = io.connect('http://localhost:6969');
    socket.emit('subscribe', {
        room: "queue_room",
        name: '#{user.name}'
    })
    $(document).ready(function() {
        $('.sendRequest').each(function() {
            $(this).click(function() {
                //$(".the_results").hide();
                var roomNumber = $(this).attr('value');
                var val = $(this).attr('id').toString();
                var URL = 'http://localhost:6969/results/';
                var obj = {
                    room: roomNumber
                };
                socket.emit('dequeue', {
                    room: "queue_room",
                    id: val
                })
                socket.on('dequeue', function(data) {
                    removeRow()
                })
                $.ajax({
                    url: URL,
                    type: "POST",
                    data: JSON.stringify(obj),
                    contentType: "application/json",
                    success: function() {
                        console.log('The AJAX is working as intended')
                    },
                    error: function() {
                        console.log("CMON! nabbit, ya gotta issue with ur ajax request")
                    }
                });
            });
        });
    });

SERVER SIDE SOCKET FUNCTIONALITY:

socket.on('dequeue', function(data) {
  console.log("broadcast to " + data.room)
  io.sockets.in("queue_room").emit('dequeue', {
    room: data.room,
    id: data.id
  })

Answer 1

I only listened for the socket event when the button was clicked. Inatead place the listen event outside the button click such that anyone who visits the page is able to see updates on the page.