How to connect elements

First of all, I'm an absolute beginner when it comes to JS. So please be gentle with me.

My concern is, that I have two different tab tables and want them to be connected on click.

//Tab Header #1//

<ul class="plus-tabs-nav  nav-tab-underline full-width  ">

  <li><div id="A1" class="elementor-tab-title elementor-tab-desktop-title plus-tab-header active" data-tab="1" tabindex="2051" 
  role="tab" aria-controls="tab-content-A1"><span>A1</span></div></li>
  <li><div id="elementor-tab-title-2052" class="elementor-tab-title elementor-tab-desktop-title plus-tab-header inactive" data-tab="2" 
  tabindex="2052" role="tab" aria-controls="elementor-tab-content-2052"><span>A2</span></div></li>
  <li><div id="elementor-tab-title-2053" class="elementor-tab-title elementor-tab-desktop-title plus-tab-header inactive" data-tab="3" 
  tabindex="2053" role="tab" aria-controls="elementor-tab-content-2053"><span>B1</span></div></li>
  <li><div id="elementor-tab-title-2054" class="elementor-tab-title elementor-tab-desktop-title plus-tab-header inactive" data-tab="4"     tabindex="2054" role="tab" aria-controls="elementor-tab-content-2054"><span>B2</span></div></li>
  <li><div id="elementor-tab-title-2055" class="elementor-tab-title elementor-tab-desktop-title plus-tab-header inactive" data-tab="5"     tabindex="2055" role="tab" aria-controls="elementor-tab-content-2055"><span>C1</span></div></li>
  <li><div id="elementor-tab-title-2056" class="elementor-tab-title elementor-tab-desktop-title plus-tab-header inactive" data-tab="6"     tabindex="2056" role="tab" aria-controls="elementor-tab-content-2056"><span>C1med</span></div></li>
  <li><div id="elementor-tab-title-2057" class="elementor-tab-title elementor-tab-desktop-title plus-tab-header inactive" data-tab="7" ^   tabindex="2057" role="tab" aria-controls="elementor-tab-content-2057"><span>TestDaF</span></div></li>
  
 </ul>

//Tab Header #2//

<ul class="plus-tabs-nav  nav-tab-underline full-width  ">

  <li><div id="A1.2" class="elementor-tab-title elementor-tab-desktop-title plus-tab-header inactive" data-tab="1" tabindex="2361" 
  role="tab" aria-controls="tab-content-A1.2"><span>A1</span></div></li>
  <li><div id="elementor-tab-title-2362" class="elementor-tab-title elementor-tab-desktop-title plus-tab-header active" data-tab="2" 
  tabindex="2362" role="tab" aria-controls="elementor-tab-content-2362"><span>A2</span></div></li>
  <li><div id="elementor-tab-title-2363" class="elementor-tab-title elementor-tab-desktop-title plus-tab-header inactive" data-tab="3" 
  tabindex="2363" role="tab" aria-controls="elementor-tab-content-2363"><span>B1</span></div></li>
  <li><div id="elementor-tab-title-2364" class="elementor-tab-title elementor-tab-desktop-title plus-tab-header inactive" data-tab="4" 
  tabindex="2364" role="tab" aria-controls="elementor-tab-content-2364"><span>B2</span></div></li>
  <li><div id="elementor-tab-title-2365" class="elementor-tab-title elementor-tab-desktop-title plus-tab-header inactive" data-tab="5" 
  tabindex="2365" role="tab" aria-controls="elementor-tab-content-2365"><span>C1</span></div></li
  ><li><div id="elementor-tab-title-2366" class="elementor-tab-title elementor-tab-desktop-title plus-tab-header inactive" data-
  tab="6" tabindex="2366" role="tab" aria-controls="elementor-tab-content-2366"><span>C1med</span></div></li>
  <li><div id="elementor-tab-title-2367" class="elementor-tab-title elementor-tab-desktop-title plus-tab-header inactive" data-tab="7" tabindex="2367" role="tab" aria-controls="elementor-tab-content-2367"><span>TestDaF</span></div></li>
  
</ul>

So, for example if I click at the first table on "A1", I want the "A1" tab at the second table also to be selected. Maybe the following image and code makes it more clear:

<script>
    if (document.getElementById('A1').onclick) {
   select('A1.2').onclick;
}
</script>

I know this code is completely wrong, but maybe it makes it more clear, what I want to achieve.