How to operate two set of tabs separately in HTML?

I am trying to operate different sets of tabs separately but it is not working properly. Tab 1, 2, and 3 belong to the first set of tabs whereas Tab A, B, and C belong to the second set of tabs. Tab 1 and Tab A should be opened by default when the page is loaded.

What are the necessary changes to be made to achieve the goal?

<!DOCTYPE html>
<html>
<head>
<style>
.tab1 button.active {
  background-color: #03a1fc;
}
.tab2 button.active {
  background-color: #03a1fc;
}
.tabcontent {
  display: none;
}
</style>

</head>
<body>

<div class = "tab1">
  <button class = "tablinks" id="defaultOpen1" onclick="openTab1(event, 't11')">1</button>
  <button class = "tablinks" onclick="openTab1(event, 't12')">2</button>
  <button class = "tablinks" onclick="openTab1(event, 't13')">3</button>
</div>

<div id="t11" class="tabcontent">
  <p>tab 1</p>
</div>

<div id="t12" class="tabcontent">
  <p>tab 2</p> 
</div>

<div id="t13" class="tabcontent">
  <p>tab 3</p>
</div>


<br><br><br>
<div class = "tab2">
  <button class = "tablinks" id="defaultOpen2" onclick="openTab2(event, 'tA')">A</button>
  <button class = "tablinks" onclick="openTab2(event, 'tB')">B</button>
  <button class = "tablinks" onclick="openTab2(event, 'tC')">C</button>
</div>

<div id="tA" class="tabcontent">
  <p>tab A</p>
</div>

<div id="tB" class="tabcontent">
  <p>tab B</p> 
</div>

<div id="tC" class="tabcontent">
  <p>tab C</p>
</div>


<script>
function openTab1(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

function openTab2(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen1").click();  
document.getElementById("defaultOpen2").click(); 
</script>

</body>
</html>