There are two sets of <ul> elements in my page. It's working, but now the issue is there will be two tabs active at the same time. Let's say I click tab-3 and then tab-a. The tab will switch to tab-a but now both of them would be in the active state. How can I fix this?
<div>
<div class="hr-text hr-text-left m-t-2 m-b-1"><h6><strong>List 1</strong></h6></div>
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a data-target="#tab-1" data-toggle="tab">1</a></li>
<li role="presentation"><a data-target="#tab-2" data-toggle="tab">2</a></li>
<li role="presentation"><a data-target="#tab-3" data-toggle="tab">3</a></li>
</ul>
<div class="hr-text hr-text-left m-t-2 m-b-1"><h6><strong>List 2</strong></h6></div>
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class=""><a data-target="#tab-a" data-toggle="tab">A</a></li>
<li role="presentation"><a data-target="#tab-b" data-toggle="tab">B</a></li>
<li role="presentation"><a data-target="#tab-c" data-toggle="tab">C</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab-1"><h1>1</h1></div>
<div class="tab-pane" id="tab-2"><h1>2</h1></div>
<div class="tab-pane" id="tab-3"><h1>3</h1></div>
<div class="tab-pane" id="tab-a"><h1>A</h1></div>
<div class="tab-pane" id="tab-b"><h1>B</h1></div>
<div class="tab-pane" id="tab-c"><h1>C</h1></div>
</div>
</div>