在td表内的popover bootstrap

Question

我在MVC项目中有这个代码。 我在一个简单的表中的每一行内都有一个注释字段 像这样：

$(document).ready(function() {

  //POPOVER NOTE
  $("td").children("#po1").popover({
    html: true,
    title: 'Note',
    content: function() {
      return $("td").children(".popoverContent").html();
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
  <a href="#" id="po1" class="btn btn-info" data-container="body" data-toggle="popover" data-placement="bottom" data-html="true">
    <span class="glyphicon glyphicon-paperclip"></span>
  </a>

  <div class="popoverContent" style="display: none !important">
    <div class="form-group">
      @Html.DisplayFor(modelItem => item.Note, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
    </div>
  </div>


</td>

上面的代码在每种情况下都会返回第一行的内容。 我错了什么？