Javascript HTML+；Jquery动态添加引导下拉列表

我有一个小问题

建立一个系统来管理预订。现在我希望每个预订都有自己的下拉菜单

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    All of my lovely actions
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="?add_booking_queue&id={booking_id}">Add to queue</a>
    <span class="dropdown-item" onclick="show_booking_summary({booking_id});">Another action</span>
    <a class="dropdown-item" href="?download_pdf&id={booking_id}">Download booking PDF</a>
  </div>
</div>

我所有可爱的动作
另一个动作

有些代码就是这样的

但万一我在一个屏幕上列出了大约1000个预订。这将生成大量HTML，在加载时间内对我不利。而且它可能会增加浏览器内存的使用

现在我想动态添加这个下拉菜单

例如，添加具有此功能的单个按钮

<tr>
    <td>ticket : 293823098</td>
    <td>price : $59,-</td>
    <td>name : Donald Trump</td>
    <td><i class="fas fa-cog booking-action" data-id="238232"></i></td>
</tr>

门票：293823098
价格：$59-
姓名：唐纳德·特朗普

然后，当点击.booking操作时，它会添加上面提到的下拉列表。或类似的。不限于。仅供参考。并使用setdata id=“238232”/或另一个仅包含此项的标记

我的问题是，我似乎无法找到实现这一点所需的代码或开始。

---

我发现的只是右键单击上下文菜单，这不是我想要的。

如果您有大量记录，为什么不使用分页并一次显示有限数量的记录？原因是客户也希望这样做，而不需要分页。我提供了一个分页选项。但也没有。但不管是左键还是右键，最优雅的解决方案是在单击时动态添加菜单