JS - Web UI Popover

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>
<div id="pop-content" style="display:none">
  <a class="collection-item title">Signed in as</a>
  <div class="divider"></div>
  <a href="#!" class="collection-item">Support</a>
  <div class="divider"></div>
  <a href="#!" class="collection-item">Settings</a>
</div>

<table style="margin:50px">
  <tr>
    <td>Name 0</td>
    <td>Title 0</td>
    <td>
      <a id="0" class="more mdi mdi-plus mdi-24px" data-id="0" href="javascript:void(0);"></a>
    </td>
  </tr>
  <tr>
    <td>Name 1</td>
    <td>Title 1</td>
    <td>
      <a id="1" class="more mdi mdi-plus mdi-24px" data-id="1" href="javascript:void(0);"></a>
    </td>
  </tr>
  <tr>
    <td>Name 2</td>
    <td>Title 2</td>
    <td>
      <a id="2" class="more mdi mdi-plus mdi-24px" data-id="2" href="javascript:void(0);"></a>
    </td>
  </tr>
</table>

JavaScript

$(document).ready(function() {

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

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

    $('#' + i).webuiPopover({
      url: '#pop-content',
      trigger: 'click',
      style: 'v2',
      placement: 'auto',
      animation: 'pop',
      width: '180',
      cache: false
    });
  }
});