Single tab multiple content bootstrap 4

I am working on bootstrap tabs, I am trying for the single tab with multiple content div's. I have tried by using two href values like href="#home, #home-two". but it is not working. I have gone through the stack and found a previously answered question but he is using an older and non-standard version of bootstrap. The code he provided is working fine but when I change the cdns to latest and standard versions it is not working as it was before. Here 1) I'm trying to do a single tab with two different content div when I clicked on one tab two div's content has to change, 2) Second thing like this I have two tabs on the same page. can anyone help me out with this problem. If this cant be achieved through pure bootstrap tabs can this be achieved by jquery?

previously answered question and desired output

Here I have tried using class names instead of id's but unable to achieve the desired output.

li a.active.show {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a data-target=".home, .home_else" data-toggle="tab">C1</a></li>
  <li class="active"><a data-target=".profile, .profile_else" data-toggle="tab">C2</a></li>
</ul>

<div id="myContent" class="tab-content">
  <div class="tab-pane fade profile active show">
    <p>Content 1.</p>
  </div>
  <div class="tab-pane fade profile">
    <p>Content 2.</p>
  </div>
</div>

<hr>

<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade profile active show">
    <p>Content 111.</p>
  </div>
  <div class="tab-pane fade profile_else">
    <p>Content 2222.</p>
  </div>
</div>

from Single tab multiple content bootstrap 4