Bootstrap tabs not containing carousel widget data correctly? - html

Question

Bootstrap: 3.4.1
Jquery: 3.4.1
Site page in question:
http://ctsdh.org/kroberts/maryland-loyalism-project-redux/the-memorial-of-james-brooks?path=ao12-6&t=1652330938823
I built a bootstrap feature for a site a couple years ago in the Scalar CMS that is supposed to contain three seperate caroursels in tabs that you can toggle between (essentially there is only supposed to be one carousel on the page at a time depednding on the active tab).
I went back to the site and the tab buttons didn't work and all three carousels were being shown for all the pages using them.
I constructed the tabs in the content area in the Scalar page editer by adding the following html in 'Source' mode (taken from https://getbootstrap.com/docs/3.4/javascript/#markup):
<div class="container">
<!-- Nav tabs -->
<ul id="myTabs" class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a aria-controls="narrative" role="tab" data-toggle="pill" href="#menu1">Narrative</a></li>
<li role="presentation"><a aria-controls="claims" role="tab" data-toggle="pill" href="#menu2">Claims</a></li>
<li role="presentation"><a aria-controls="testimonies" role="tab" data-toggle="pill" href="#menu3">Testimonies</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="menu1" role="tabpanel"><a class="inlineWidget inline" data-size="full" data-nodes="the-narrative-of-james-brooks---page-1,the-narrative-of-james-brooks---page-2,the-narrative-of-james-brooks---page-3,the-narrative-of-james-brooks---page-4" data-widget="carousel" data-align="left" data-caption="none" name="scalar-inline-widget"></a>
</div>
<div class="tab-pane fade" id="#menu2" role="tabpanel"><a data-align="center" class="inlineWidget inline" data-size="full" data-widget="carousel" data-nodes="the-claims-of-james-brooks---page-1,the-claims-of-james-brooks---page-2,the-claims-of-james-brooks---page-3" data-caption="none" name="scalar-inline-widget"></a>
</div>
<div role="tabpanel" class="tab-pane fade" id="menu3"><a data-align="center" class="inlineWidget inline" data-size="full" data-widget="carousel" data-nodes="the-testimonies-for-james-brooks---page-1,the-testimonies-for-james-brooks---page-2,the-testimonies-for-james-brooks---page-3,the-testimonies-for-james-brooks---page-4,the-testimonies-for-james-brooks---page-5,the-testimonies-for-james-brooks---page-6,the-testimonies-for-james-brooks---page-7,the-testimonies-for-james-brooks---page-8,the-testimonies-for-james-brooks---page-9,the-testimonies-for-james-brooks---page-10,the-testimonies-for-james-brooks---page-11,the-testimonies-for-james-brooks---page-12,the-testimonies-for-james-brooks---page-13,the-testimonies-for-james-brooks---page-14" data-caption="none" name="scalar-inline-widget">test</a>
</div>
</div>
</div>
Where I think the issue lies is when I hit 'Save and view' in the editor: the CMS builds the page with a lot more element tags that mess with the nesting of my custom html. For whatever reason, the data in the tab panes (which gets created when you make a carousel in the editer) is getting placed outside the container and into a completely seperate :
<div class="paragraph_wrapper">
<div class="body_copy">
<div class="container">
<!-- Nav tabs -->
<ul id="myTabs" class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a aria-controls="narrative" role="tab" data-toggle="pill" href="http://ctsdh.org/kroberts/maryland-loyalism-project-redux/the-memorial-of-james-brooks?path=ao12-6&t=1652330938823#menu1">Narrative</a></li>
<li role="presentation"><a aria-controls="claims" role="tab" data-toggle="pill" href="http://ctsdh.org/kroberts/maryland-loyalism-project-redux/the-memorial-of-james-brooks?path=ao12-6&t=1652330938823#menu2">Claims</a></li>
<li role="presentation"><a aria-controls="testimonies" role="tab" data-toggle="pill" href="http://ctsdh.org/kroberts/maryland-loyalism-project-redux/the-memorial-of-james-brooks?path=ao12-6&t=1652330938823#menu3">Testimonies</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="menu1" role="tabpanel">
</div>
</div>
</div>
</div>
</div>
<!-- outside??? -->
<a class="inlineWidget inline widget_link" data-size="full" data-nodes="the-narrative-of-james-brooks---page-1,the-narrative-of-james-brooks---page-2,the-narrative-of-james-brooks---page-3,the-narrative-of-james-brooks---page-4" data-widget="carousel" data-align="left" data-caption="none" name="scalar-inline-widget" style="display: none;"></a>
<!-- widget for first carousel, duplicated? -->
<div class="widget_slot full_widget widget_carousel left_slot">...</div>
<!-- repeats this pattern for all three carousels -->
In the past, the whole widget element was contained in the right area, but now it assumes this behavior...I have all the bootstrap and jquery files included as well. Maybe there is a way to maipulate the DOM to put all the "widget_slot full_widget widget_carousel left_slot" stuff in the tabs at build time? Any and all suggestions/feedback are much appreciated :)