title: Asynchronous updates only show 1 value
body: <p>Referenced from: 
  <a href="https://www.shanelynn.ie/asynchronous-updates-to-a-webpage-with-flask-and-socket-io/" rel="nofollow noreferrer">https://www.shanelynn.ie/asynchronous-updates-to-a-webpage-with-flask-and-socket-io/</a></p>
  
  <p>I am altering this code to work with load cells and display on a web page continuously. All works great and the correct code is shown on the web page, however I only want the most recent value to display on the web page, not 10 values at a time. At first I thought this would be in the static/js/application.js file but altering that code does not solve the problem. I'm not sure where the div id="log" is being defined, if this is where the issue is coming into play. Any help is appreciated.</p>
  
  <pre><code>$(document).ready(function(){
      //connect to the socket server.
      var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
      var numbers_received = [];
  
      //receive details from server
      socket.on('newnumber', function(msg) {
          console.log("Received number" + msg.number);
          //maintain a list of ten numbers
          if (numbers_received.length &gt;= 10){
              numbers_received.shift()
          }            
          numbers_received.push(msg.number);
          numbers_string = '';
          for (var i = 0; i &lt; numbers_received.length; i++){
              numbers_string = numbers_string + '&lt;p&gt;' + numbers_received[i].toString() + '&lt;/p&gt;';
          }
          $('#log').html(numbers_string);
      });
  
  });
  </code></pre>
  
  <p>I atempted changing the "maintain a list of ten numbers" code (changed the 10 to other values, commented out) but nothing changed on the output.</p>