TAB Issue

Expected behavior I expect one box to appear.

Actual behavior On page load, two tabs appear one on top of each other. As soon as I click on a tab, the bottom box disappears and it works like normal, although I have seen some strange effects at other times. i.e not seeming to clear, or clearing after a few clicks.

Resources (screenshots, code snippets etc.)

partial code:

            <div class="tab-content card pt-5" id="myTabContentMD">
                <div class="tab-pane fade show active" id="irq-md" role="tabpanel" aria-labelledby="irq-tab-md">
                    <textarea class='form-control' id='IRQuestion' name='IRQuestion' rows='9'>` + datapack[0].IRQuestion + `</textarea>
                </div>
                <div class="tab-pane fade show active" id="control-md" role="tabpanel" aria-labelledby="control-tab-md">
                    <textarea class='form-control rounded-corners' id='Description' name='Description' rows='9'>`    +   datapack[0].Description     +   `</textarea>
                </div>
                <div class="tab-pane fade" id="supplemental-md" role="tabpanel" aria-labelledby="profile-tab-md">`;