Create 2 tabs in bootstap?

Question

HTML

How to create 2 tabs in bootstrap v.4. Example: when I click on the Messagge tab from 1 tab, the Message panel is displayed and the tab becomes active. Then when I click on the Home tab, the Home panel is displayed from 2 tabs. The essence of the problem is that when I want to go to the Message tab from 1 tab, it will not be displayed, because in theory it is already active and you cannot click it. Can I somehow immediately remove its "activity" so that there is no such problem? In the picture, I want to be able to move from element to element freely.

<ul class="nav nav-tabs" id="myTab" role="tablist" >
      <li class="nav-item">
        <a class="nav-link active" id="home-tab1" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="profile-tab1" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="messages-tab1" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="settings-tab1" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
      </li>
    </ul>
    <ul class="nav nav-tabs" id="myTab1" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
        </li>
      </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
      <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
      <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">Message</div>
      <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">Setting</div>
    </div>

Answer 1

Set different IDs in two tabs.
id according to html rules must be unique on the page.