动态构建Bootstrap下拉菜单时出错在表中

Question

这是我第一次在这里发帖，我是编码的初学者。我目前正在尝试使用for循环创建动态Bootstrap下拉菜单。我能够创建箭头图标，表示该按钮是下拉列表。但是，每当我点击任何箭头图标时，下拉菜单上下文将显示在底部页面。这是问题的屏幕截图

编辑：我仍在尝试解决问题，是否有人可以帮助我？

Image of the problem

Image of desired result

以下是我的代码：

<script>
    var $rowElement = null;
    var $cellElement = null;
    var $hyperLinkElement = null;
    var $dropDownElement = null;
    var $ulElement = null;
    var $liElement = null;
    var $spanElement = null;
    var $tableBodyElement = $('#tableBody');

    for (index = 0; index <= 10; index++) {

        $rowElement = $('<tr></tr>');

        // Activate the drop down menu
        $cellElement = $('<td></td>')
        $dropDownElement = $('<button></button>')
            .attr('data-toggle', 'dropdown')
            .attr('aria-haspopup', 'true');

        $spanElement = $('<span>')
            .addClass('caret');

        $dropDownElement.append($spanElement);
        $cellElement.append($dropDownElement);
        $rowElement.append($cellElement);

        // Build the drop down menu content
        $ulElement = $('<ul></ul>')
            .addClass('dropdown-menu');

        $liElement = $('<li></li>')

        $hyperLinkElement = $('<a></a>')
            .text('Test text');

        $liElement.append($hyperLinkElement);
        $ulElement.append($liElement);

        $cellElement.append($ulElement);
        $rowElement.append($cellElement);

        $tableBodyElement.append($rowElement);

    }

</script>

<div class="panel panel-primary">
    <div class="panel-heading clearfix">
        <div class="panel-title">
            Bootstrap table
        </div>
    </div>
</div>
<div class="panel-body">
    <div class="row">
        <div class="col-md-12">
            <table class="table table-bordered table-striped table-hover">
                <thead>
                    <tr>
                        <th>Menu</th>
                    </tr>
                </thead>
                <tbody id="tableBody"></tbody>
            </table>
        </div>
    </div>
</div>