使用JSBarcode循环生成条形码时所有条码均为最后一个值如何解决

• HTML 规范要求 id 属性全局唯一，你在循环中给所有条形码SVG元素都设置了相同的id="barcode"，会导致DOM选择器逻辑异常。
• 每次执行JsBarcode("#barcode", ln)时，选择器会匹配到页面内第一个（或所有）重复id的元素，后续循环的赋值会覆盖之前的生成结果，最终所有条形码都显示最后一次循环的id值。

给每个SVG元素生成唯一的id，同时对应修改JsBarcode的选择器即可，可选用以下两种实现方式：

方式1：用对象id作为唯一后缀 #

<tbody>
<% lineitemObj.forEach(function(obj) { %>
   <tr>
      <td><%= obj.id %></td>
      <td><%= obj.drawing_num %></td>
      <td><%= obj.description %></td>
      <td><%= obj.qty %></td>
      <td>
         <svg id="barcode_<%= obj.id %>"></svg>
         <script>
            var ln = '<%= obj.id %>'
            JsBarcode("#barcode_<%= obj.id %>", ln);
          </script> 
       </td>
    </tr>
<% }) %>
</tbody>

方式2：用循环索引作为唯一后缀（适合obj.id含特殊字符的场景） #

<tbody>
<% lineitemObj.forEach(function(obj, index) { %>
   <tr>
      <td><%= obj.id %></td>
      <td><%= obj.drawing_num %></td>
      <td><%= obj.description %></td>
      <td><%= obj.qty %></td>
      <td>
         <svg id="barcode_<%= index %>"></svg>
         <script>
            var ln = '<%= obj.id %>'
            JsBarcode("#barcode_<%= index %>", ln);
          </script> 
       </td>
    </tr>
<% }) %>
</tbody>

内容的提问来源于stack exchange，提问作者NicLovin