javascript - JS を介して一意のサブデータを使用してクラスごとに複数の要素を更新するにはどうすればよいですか?

Question

要するに、次のような外部サーバーから受信している一連の 5 ～ 10 個のイベントがあります。

event: add
data: { "hostname":"name", "properties": {"info": "50"}}

event: add
data: { "hostname":"name2", "properties": {"info": "45"}}

event: add
data: { "hostname":"name3", "properties": {"info": "67"}}

などなど。

そして、次のように EventSource JS を介してそれらを処理しています。

var source = new EventSource("http://XXX.XXX.XXX.XXX:PORT/")
source.addEventListener('add', onAdd)

function onAdd(e) {
  var data = parse(e)

  var output = document.getElementById('append');
  var ele = document.createElement("div");
  var frag = document.createDocumentFragment();
  frag.appendChild(ele);
  ele.setAttribute("class", 'row sub-item');
  ele.innerHTML ="<ul>"
                +"<li>" + "<span id=name>" + data.hostname + "</span>" + "</li>"
                +"<li>" + "INFO: " + "<span id=info>" + data.properties.info + "</span>" + "</li>"
                +"</ul>"
                +"</div>"
  output.appendChild(frag);
}

このコードは、各 div とその中の順序付けられていないリストをページに正常に追加します。

私の問題は、次のような別の将来のイベントがあることです。

event: update
data: { "hostname":"name", "properties": {"info": "65"}}

event: update
data: { "hostname":"name2", "properties": {"info": "35"}}

event: update
data: { "hostname":"name3", "properties": {"info": "15"}}

等..

これらはサーバーから取得され、新しい情報プロパティを頻繁に送信します。クラスでソートすると、ページ上のすべての単一の情報プロパティが同じ番号(name1 45 name2 45 name3 45)で更新されるため、 span クラス () を使用してすべての固有の情報プロパティを更新する方法が見つかりません。id ( )は使用できません。これは、id がページで 1 回だけ使用されることになっているため、最初のものだけが更新されるためです。<span class="info"<span id="info"

私が見落としているこれに対する簡単な解決策がなければならないことを私は知っています。ありがとう！