How to use the same id on different tabs (nav tabs)?

Question

Bootstrap

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <div id='my-id'></div>
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <div id='my-id'></div>
  </div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
    <div id='my-id'></div>
  </div>
</div>

This is the standard code from here - https://getbootstrap.com/docs/5.0/components/navs-tabs/ . I just added the following code to the body of each tab: With this implementation, it turns out that there will be 3 elements on the page with the same id. Although visually I will never be on more than one of these tabs. Because of this, I have to invent my own prefix for id for each tab so that they differ. Is there a better solution for this? In real code, all elements with the same id come, of course, after rendering, etc., so I pass the necessary prefix to it, but because of this, the code of these added elements becomes poorly readable due to constructions like "##{prefix }-my-id" and more.
<div id='my-id'></div>