JS - Popover & Dataset

HTML

<link rel="stylesheet" href="https://cdn.materialdesignicons.com/1.7.22/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.webui-popover/1.2.1/jquery.webui-popover.min.css">
<script src="https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.webui-popover/1.2.1/jquery.webui-popover.min.js"></script>
<table style="margin:50px">
  <tr>
    <td>name</td>
    <td>
      <a class="more" id="0" data-fid="0" data-uplid="0" href="javascript:void(0);"><i class="material-icons">more_horiz</i></a>
    </td>
  </tr>
  <tr>
    <td>name</td>
    <td>
      <a class="more" id="1" data-fid="1" data-uplid="1" href="javascript:void(0);"><i class="material-icons">more_horiz</i></a>
    </td>
  </tr>
  <tr>
    <td>name</td>
    <td>
      <a class="more" id="2" data-fid="2" data-uplid="2" href="javascript:void(0);"><i class="material-icons">more_horiz</i></a>
    </td>
  </tr>
</table>

JavaScript

var more = document.getElementsByClassName('more');

for (var i = 0; i < more.length; i++) {

  var fid = more[i].dataset.fid;
  var uplid = more[i].dataset.uplid;

  //Popover

  $('#' + fid).webuiPopover({
    content: '<div id="pop-content"><a href="core/upload/' + fid + '/' + uplid + '" class="collection-item active">' + fid + ': Edit</a></div>',
    trigger: 'manual',
    dismissible: true,
    style: 'v2',
    placement: 'bottom-left',
    animation: 'pop',
    width: '180',
    cache: false
  });

  //Once the values have been passed, show the popover

  $('#' + fid).webuiPopover('show');
}