Struggling to implement pagination within Bootstrap tabs nested inside a modal.
The code snippet in question is as follows:
<div id="myModal1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" >
<ul class="nav nav-tabs" id="myTab" >
<li class="active"><a href="#home" data-toggle="tab" id="button1" >Basics</a></li>
<li ><a href="#profile" data-toggle="tab" id="button2" >Concern</a></li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane active" id="home" >
<ul class="pager" id="myTab" >
<li class="next"><a href="#profile" data-toggle="tab" >Next →</a></li>
</ul>
</div>
<div class="tab-pane" id="profile" >
<ul class="pager" id="myTab" >
<li class="previous"><a href="#home" data-toggle="tab">← Previous</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Although the next and previous buttons function individually, using them consecutively does not switch tabs correctly, resulting in the second tab color change without actually moving to it. What could be causing this issue?