Html 选项卡内容显示一个在另一个之下

我有一个MVC视图，它将动态创建选项卡。当代理单击按钮时，它将创建一个新选项卡（Session1），根据所附图像，该选项卡内将有另外两个选项卡（Contact&disposition）。问题是，当我单击“处置”选项卡时，该选项卡的内容将显示在“联系人”选项卡下方

初始选项卡的静态代码为：

<div class="tab-content-panel">
<div class="panel-heading">
    <ul class="nav nav-tabs" id="mainul">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#session_0">Session0</a>
        </li>
    </ul>
</div>
<div class="panel-body">
    <div class="row">
        <div class="col-md-12">
            <div class="tab-content">
                <div class="tab-pane active" id="session_0">Session0</div>
            </div>
        </div>
    </div>
</div>

会话0

` 我正在使用以下功能添加选项卡：

function AddSession(tabCounter, sessionId, interactionOrigin, phNumber, trAttribute) {
console.log('Add tab ' + tabCounter + ' Session ' + sessionId);
var html = '<li class="nav-item"><a class="nav-link"  data-toggle="tab" href="#session_' + tabCounter + '">session_' + tabCounter + '</a></li>';
$("#mainul").append(html);
var sessionContent = getSessionView(tabCounter, sessionId, interactionOrigin, phNumber);
var content = '<div class="tab-pane" id = "session_' + tabCounter + '" >' + sessionContent + '</div >';
$(content).appendTo('.tab-content');
displayTransAtt(trAttribute, tabCounter);
return tabCounter;

function AddSession（tabCounter、sessionId、interactionOrigin、phNumber、trAttribute）{
log（'addtab'+tabCounter+'Session'+sessionId）；
var html='
；
$（“#mainul”）.append（html）；
var sessionContent=getSessionView（tabCounter、sessionId、interactionOrigin、phNumber）；
var content=''+sessionContent+''；
$（内容）.appendTo（“.tab内容”）；
显示交易（trAttribute，tabCounter）；
返回计数器；

}

功能获取会话视图添加2个选项卡联系人和处置：

function getSessionView(num_tabs, sessionId, interactionOrigin, phNumber) {
console.log('Tab ' + num_tabs);
var str = "Session" + sessionId + "  <button type='button' class='button-save' id='endData" + num_tabs + "' onclick='saveDetails(" + num_tabs + ")'>End Call & Save</button>";   
str = str + "<nav class='container'>";
str = str + "<ul class='nav nav-pills nav-stacked'>";
str = str + " <li class='nav-item'><a class='nav-link active' data-toggle='pill' href='#contactTab" + num_tabs + "'>Contact Attributes</a></li>";
str = str + " <li class='nav-item'><a class='nav-link' data-toggle='pill' href='#dispositionTab" + num_tabs + "'>Dispositions</a></li>";
str = str + "</ul></nav>";
str = str + "<div class='tab-content" + num_tabs + "' style='background-color:floralwhite; height: 290px; width: 110 %'>";
str = str + "<div class='container tab-pane fade show active' id='contactTab" + num_tabs + "' style='background-color: floralwhite'>"; 
str = str + "<table class='table' cellspacing='0' cellpadding='0'>";
str = str + "<tr class='bg-light'><td>";
str = str + "<div class='form-group'>";
str = str + " <input type='text' id='movieName" + num_tabs + "' class='form-control input-value' placeholder='Movie Name' />";
str = str + "</div></td></tr>";   
str = str + "</table>";//col
str = str + "</div>";//contact
str = str + "<div id='dispositionTab" + num_tabs + "' class='container tab-pane fade' style='background-color:floralwhite'>";  
str = str + "<table class='table'>";
str = str + "<tr class='bg-light'><td>";   
str = str + "<div class='form-group'>";
str = str + "<select id='dispositio" + num_tabs + "' class='select'>";
str = str + "<option value='Disposition'>Disposition</option>";
str = str + "</select>";
str = str + "</div></td></tr>";
str = str + "</table>";//col
str = str + "</div>";//disp   
str = str + "</div>";//tab content  
return (str);

函数getSessionView（num_选项卡、sessionId、interactionOrigin、phNumber）{ console.log（'Tab'+num_tabs）； var str=“会话”+sessionId+“结束呼叫并保存”； str=str+“”； str=str+“

”； str=str+“
”； str=str+“
”； str=str+“

”； str=str+“”； str=str+“”； str=str+“”； str=str+“”； str=str+“”； str=str+“”； str=str+“”； str=str+“”；//列 str=str+“”；//联系人 str=str+“”； str=str+“”； str=str+“”； str=str+“”； str=str+“”； str=str+“处置”； str=str+“”； str=str+“”； str=str+“”；//列 str=str+“”；//disp str=str+“”；//选项卡内容 返回（str）； }

如何将“处置”选项卡“联系人”内联到“联系人”选项卡