Javascript 使用EJS使用数据填充列表单击上HTML视图的右侧

我现在有一个视图，左边是一个列表，右边是一个结果视图。我正在使用Node/EJS，我正在传递填充右侧列表和结果视图所需的所有内容。目标是每次单击列表项时，结果视图将填充有关该列表项的数据。我不知道该怎么做这个部分。列表是动态创建的，因此所有列表项都没有唯一的ID

我当前的提议，我想象我点击一个列表项，使用jQuery找出唯一的列表项，并以某种方式将数据传递到右侧视图？也许这完全可以通过CSS实现，构建每个列表项对应的结果视图，并使用Jquery切换CSS隐藏/显示

---

我不确定最佳解决方案，或者如果我不知道jQuery/EJS的一些技巧，请提前感谢大家

请检查以下示例

<ul>
  <li id="item1" class="item">Item 1</li>
  <li id="item2" class="item">Item 2</li>
  <li id="item3" class="item">Item 3</li>
  <li id="item4" class="item">Item 4</li>
</ul>
<div class="detail">
  <div class="itemDetail" id="item1Detail">
    Item 1 detail
  </div>
  <div class="itemDetail" id="item2Detail">
    Item 2 detail
  </div>
  <div class="itemDetail" id="item3Detail">
    Item 3 detail
  </div>
  <div class="itemDetail" id="item4Detail">
    Item 4 detail
  </div>
</div>
<script>
  $("ul li").click(function(){
    var attr =  $(this).attr('id');
    $(".itemDetail").hide();
    $("#"+attr+"Detail").show();
  })
</script>

plnkr-

---

谢谢，我想我必须使用某种独特的id，可能会走这条路