title: Dynamically update table rows with SocketIO
body: <p>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. </p>
  
  <p>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 <strong>row_0</strong>, which represents a particular row, but still it does not work as intended..</p>
  
  <p>My overarching goal is build out a realtime queue-ing system, but this is not working out well in my favor.</p>
  
  <p>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!!</p>
  
  <p><strong>CLIENT SIDE TABLE(JADE):</strong></p>
  
  <pre><code>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")
                      }
                  });
              });
          });
      });
  </code></pre>
  
  <p><strong>SERVER SIDE SOCKET FUNCTIONALITY:</strong></p>
  
  <pre><code>socket.on('dequeue', function(data) {
    console.log("broadcast to " + data.room)
    io.sockets.in("queue_room").emit('dequeue', {
      room: data.room,
      id: data.id
    })
  </code></pre>