隐藏在jquery按钮后面的Jquery下拉菜单

Question

正如在这里的许多类似问题的答案中所建议的那样，我已经玩过z-index，但没有运气。请注意CSS中z-index类中的container;然而，这没有任何效果。它目前只是一个基本的演示，因此html只是一个基本的表格。

以下是我的代码。

当一个人点击每一行的第一个字段时，一个按钮被插入到该字段的一侧 - 所以在第一和第二个字段之间;这个下拉菜单然后位于第二行等按钮后面 - 问题。

更新 - 有人为我的完整代码提供了一个工作jfiddle - 谢谢;虽然通过单击每行上的第一个字段生成的按钮现在位于下方，而不是相邻，但由于某种原因，z索引似乎确实有效。所以对于比我更有经验的人来说，问题是，为什么它在jquery而不是在xampp中工作？

＆＃13;

＆＃13;

// create button 
var idcheck = $(this).next().attr('id');

if (idcheck) {
  // do nothing atm
} else {
  $(this).children().attr('size', '13');
  $(this).after("<td id = 'customDropdown' class='btn'><span class='valueHolder'>Add</span></td>");
}
});

//drop down menu
var div = '<div class="container"><div class="option">Option 1</div><div class="option">Option 2</div><div class="option">Option 3</div></div>';
$(this).append(div);

＆＃13;

#customDropdown {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.container {
  position: absolute;
  top: 20px;
  left: -1px;
  overflow-y: auto;
  max-height: 200px;
  width: 192px;
  background-color: white;
  text-align: left;
  padding-left: 5px;
  padding-right: 5px;
  z-index: 99;
}
.btn {
  /* irrelevant except for: */
  position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>
        1
      </td>
      <td>
        2
      </td>
      <td>
        3
      </td>
      <td>
        4
      </td>
      <tbody>
        <tr>
          <td class="item">
            <input type="text">
          </td>
          <td>
            <input type="text">
          </td>
          <td>
            <input type="text">
          </td>
          <td>
            <input type="text">
          </td>
          <td>
            <input type="text">
          </td>
          <td>
            <input type="text">
          </td>


Output as shown inspect element on Firefox:

<td id = "customDropdown" class = "btn>
<span class = "valueHolder">Add</span>
<div class = "container">
<div class = "option">Option 1></div>
etc </div>
</td>

＆＃13;

＆＃13;

＆＃13;