如何获取HTML表中特定字段的值

Question

我使用swig.js构建一个表来逐步浏览MongoDB文档，并希望允许用户从表中删除一个条目，然后将从Mongo中删除。不幸的是，当我让它返回要删除的记录的id时，我的函数总是返回第一行中的值。

每一行都有一个删除按钮和相关的记录ID。如何获取按钮所在行的记录ID的值？

这是我的代码：

<div class="container">
      <div class="text-center">
          <h1>Story Details</h1>
      </div>
      <div>
          <br />
          <div class="container">
              <div class="col-md-12 column list-group">
                  {% for story in stories %}
                  <div class="list-group-item">
                      <table id="table" class="table table-striped table-bordered table-hover table-condensed">
                          <tbody>
                          <tr><td> <button onclick = deleteStory(document.getElementById("rec").innerText)>Delete</button></td>
                              <td><strong>Title:</strong> {{ story.title }}</td>
                              <td><strong>&nbsp&nbsp&nbspGenre:</strong> {{ story.genre }}</td>
                              <td><strong>&nbsp&nbsp&nbspWord Count:</strong>{{ story.length }}</td>
                              <td><strong>&nbsp&nbsp&nbspRecord created:</strong> {{ story.createdOn.toDateString() }}</td>
                              <td id="rec", name="rec">{{story.id}}</td>
                          </tr>
                          <tr>
                              <td colspan="6">
                                  <strong>Notes/Comments:</strong> {{ story.notes }}
                              </td>
                          </tr>
                          </tbody>
                      </table>
                  </div>
                  {% endfor %}
              </div>
          </div>
      </div>
  </div><!-- /.container -->
  <script>
      function deleteStory(id) {
          console.log(id);
      }
  </script>
  </body>
</html>