title: How to add single row to table in javascript while using Signal R in ASP.Net Core?
body: <p>I have a model called Server with the attributes ComputerName and Type. All of the servers are listed on a table like this:
  <a href="https://i.stack.imgur.com/Kikry.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kikry.png" alt="enter image description here" /></a></p>
  <p>I want this table to be updated in Real-Time everytime a new server is added. For doing that I'm using Signal R. However when a new server is added, the previous servers are duplicated and added once more:
  <a href="https://i.stack.imgur.com/3U7cq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3U7cq.png" alt="enter image description here" /></a></p>
  <p>I'm not sure why this is happening. Here is my code where the table is created:</p>
  <pre><code> &lt;table class=&quot;table&quot;&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.ComputerName)
                  &lt;/th&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.Type)
                  &lt;/th&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.Estado)
                  &lt;/th&gt;
  
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody id=&quot;table&quot;&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  <p>And the javascript code:</p>
  <pre><code>&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;~/lib/microsoft/signalr/dist/browser/signalr.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
     
          var connection = new signalR.HubConnectionBuilder().withUrl(&quot;/myHub&quot;).build();
  
          connection.on(&quot;UpdateServers&quot;, function () {
              $.get(&quot;/api/ServersAPI&quot;, function (data) {
                  console.log(data);
                  $.each(data, function (i, item) {
                      var img;
  
                      if (item.state == &quot;Ready&quot;) {
                           img = &quot;&lt;img src='~/icons/enabled.png' style='width: 20px; height: 20px'/&gt;&quot;
                      } else
                      {
                          if (item.state == &quot;Reboot Pending&quot;) {
                               img = &quot;&lt;img src='~/icons/warning.png' style='width: 20px; height: 20px'/&gt;&quot;
                          }
  
                      } 
                      
                      $('#table').append(&quot;&lt;tr&gt;&lt;td&gt;&quot; + item.computerName + &quot;&lt;/td&gt;&lt;td&gt;&quot; + item.type + &quot;&lt;/td&gt;&lt;td&gt;&quot; + img + &quot;&lt;/td&gt;&quot;);
  
  
  
                  });
  
              });
          });
  
    
  
          connection.start().then(() =&gt; {
              connection.invoke(&quot;PostServers&quot;).catch(function (err) {
                  return console.error(err.toString());
              });
  
          });
  
  
  
  &lt;/script&gt;
  </code></pre>
  <p>What is wrong with the code for it to be adding the same information multiple times?
  I'm avaliable to answer any questions or share more code.
  Thank you in advance.</p>