Bootstrap 4 JS menu tab

i have this code and its working but not properly.

<div class="row">
<div class="col-4">
    <strong>Ⅰ. Main A</strong>
    <ul class="nav flex-column list-style">
        <li class=""><a class="" data-toggle="tab" href="#item1">A 1</a></li>
        <li class=""><a class="" data-toggle="tab" href="#item2">A 2</a></li>
        <li class=""><a class="" data-toggle="tab" href="#item3">A 3</a></li>
    </ul>
    <strong>Ⅱ Main B</strong>
    <ul class="nav flex-column list-style">
        <li class=""><a class="" data-toggle="tab" href="#item4">B 1</a></li>
    </ul>
</div>
<div class="col-8 border-left ">
    <div class="tab-content ">
        <div class="tab-pane scroll-able" id="item1">
            <h3>A 1</h3>
        </div>
        <div class="tab-pane scroll-able" id="item2">
            <h3>A 2</h3>
        </div>
        <div class="tab-pane scroll-able" id="item3">
            <h3>A 3</h3>
        </div>
        <div class="tab-pane scroll-able" id="item4">
            <h3>B 1</h3>
        </div>
    </div>
</div>

when i click each once its showing the content correctly but its not working properly and leaving the active and show class

my data is dynamic.