We make a table that can be displayed/hidden with tabs on WordPress with only HTML and CSS.
I would like to be able to switch between multiple tables with radio buttons in the tab.
[I want to make] It ’s like the ranking on this site
[Reference site] This is used as a reference

Problem

1. Radio button with checked in input is not checked first
2. The contents of button ID 1-c, 2-a, 2-c, 3-a are not displayed

Source code

  <input type = "radio" name = "tab_item" checked>
  <label for = "tab1">Overall</label>
  <input type = "radio" name = "tab_item">
  <label for = "tab2">Popular</label>
  <input type = "radio" name = "tab_item">
  <label for = "tab3">Cheap</label>
  
    
          
            <input type = "radio" name = "intab_item" checked>
            <label for = "intab1_a">Overall1</label>
            <input type = "radio" name = "intab_item">
            <label for = "intab1_b">Taste 1</label>
            <input type = "radio" name = "intab_item">
            <label for = "intab1_c">Low 1</label>
            
              
                  <table>
                    <tbody>
                    <tr>
                    <td>1st</td>
                    <td>Delicious water</td>
                    </tr>
                    <tr>
                    <td>2nd</td>
                    <td>Great water</td>
                    </tr>
                    </tbody>
                  </table>
              
            
            
              
                <table>
                    <tbody>
                    <tr>
                    <td>1st</td>
                    <td>More delicious water</td>
                    </tr>
                    <tr>
                    <td>2nd</td>
                    <td>More water</td>
                    </tr>
                    </tbody>
                  </table>
              
            
            
              
                <table>
                    <tbody>
                    <tr>
                    <td>1st</td>
                    <td>Very good water</td>
                    </tr>
                    <tr>
                    <td>2nd</td>
                    <td>Very amazing water</td>
                    </tr>
                    </tbody>
                  </table>
              
            
          
    
  
  
    
          <input type = "radio" name = "intab_item" checked>
            <label for = "intab2_a">Overall2</label>
            <input type = "radio" name = "intab_item">
            <label for = "intab2_b">Taste 2</label>
            <input type = "radio" name = "intab_item">
            <label for = "intab2_c">Low 2</label>
            
              
                  <table>
                    <tbody>
                    <tr>
                    <td>1st</td>
                    <td>Delicious water</td>
                    </tr>
                    <tr>
                    <td>2nd</td>
                    <td>Great water</td>
                    </tr>
                    </tbody>
                  </table>
              
            
            
              
                <table>
                    <tbody>
                    <tr>
                    <td>1st</td>
                    <td>More delicious water</td>
                    </tr>
                    <tr>
                    <td>2nd</td>
                    <td>More water</td>
                    </tr>
                    <tr>
                    </tbody>
                  </table>
              
            
            
              
                <table>
                    <tbody>
                    <tr>
                    <td>1st</td>
                    <td>Very good water</td>
                    </tr>
                    <tr>
                    <td>2nd</td>
                    <td>Very amazing water</td>
                    </tr>
                    </tbody>
                  </table>
              
            
          
    
  
  
    

          
            <input type = "radio" name = "intab_item" checked>
            <label for = "intab3_a">Overall 3</label>
            <input type = "radio" name = "intab_item">
            <label for = "intab3_b">Taste 3</label>
            <input type = "radio" name = "intab_item">
            <label for = "intab3_c">Low 3</label>
             
              
                  <table>
                    <tbody>
                    <tr>
                    <td>1st</td>
                    <td>Delicious water</td>
                    </tr>
                    <tr>
                    <td>2nd</td>
                    <td>Great water</td></tr>
                    </tbody>
                  </table>
              
            
            
              
                <table>
                    <tbody>
                    <tr>
                    <td>1st</td>
                    <td>More delicious water</td>
                    </tr>
                    <tr>
                    <td>2nd</td>
                    <td>More water</td>
                    </tr>
                    </tbody>
                  </table>
              
            
            
              
                <table>
                    <tbody>
                    <tr>
                    <td>1st</td>
                    <td>Very good water</td>
                    </tr>
                    <tr>
                    <td>2nd</td>
                    <td>Very amazing water</td>
                    </tr>
                    </tbody>
                  </table>
              
            
          
    
  

/* Overall tab switching style * /
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
    border: solid 1px # e3e3e3;
     width: 100%;
  box-shadow: 0 0 10px rgba (0, 0, 0, 0.2);
  margin: 0 auto;
}
/ * Tab style * /
.tab_item {
  height: 50px;
  border-bottom: 3px solid # 5ab4bd;
  background-color: # d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: # 565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item: hover {
  opacity: 0.75;
}
.item1 {
  width: 100%;
}
.item2 {
  width: calc (100%/2);
}
.item3 {
  width: calc (100%/3);
}
.item4 {width: calc (100%/3);
}
/ * Delete all radio buttons * /
input [name = "tab_item"] {
  display: none;
}
/ * Styles of tab switching contents * /
.tab_content {
  display: none;
  padding: 5px 5px 0;
  clear: both;
  overflow: hidden;
}

/ * Show only the contents of the selected tab * /
# tab1: checked ~ # tab1_content,
# tab2: checked ~ # tab2_content,
# tab3: checked ~ # tab3_content {
  display: block;
}
/ * Change the style of the selected tab * /
.tabs input: checked + .tab_item {
  background-color: # 5ab4bd;
  color: #fff;
}
/ * Tab 2 in the tab * /
/ * Overall tab switching style * /
.intab {
     width: 100%;
}
/ * Tab style * /
.intab_item {
/ * float: left;* /
    border: solid 1px # 86C7CD;
    background-color: #fff;
    margin: 5px 2px;
    padding: 0 5px;
    border-radius: 5%;
}
/ * Delete all radio buttons * /
input [name = "intab_item"] {
  display: none;
}
/ * Styles of tab switching contents * /
.intab_content {
  display: none;
  padding: 4px 4px 0;
  clear: both;
  overflow: hidden;
}

/ * Show only the contents of the selected tab * /
# intab1_a: checked ~ # intab1_a_content,
# intab1_b: checked ~ # intab1_b_content,
# intab1_c: checked ~ # intab1_c_content
# intab2_a: checked ~ # intab2_a_content,
# intab2_b: checked ~ # intab2_b_content,
# intab2_c: checked ~ # intab2_c_content
# intab3_a: checked ~ # intab3_a_content,
# intab3_b: checked ~ # intab3_b_content,
# intab3_c: checked ~ # intab3_c_content
{
  display: block;
}
/ * Change the style of the selected tab * /
.intab input: checked + .intab_item {
  background-color: # 5ab4bd;
  color: #fff;
}

Change naming rules for child tab IDs (suspecting conflicts)
1-1 to 3-3 → 1-a to 3-c → 1 to 9

Supplemental information (FW/tool version etc.)

When CSS is 1-a to 1-c, everything works normally (of course, only tab 1)
If i add 2-a and later, some tabs will not be displayed.

I am sorry that the code is long and I can't explain the situation enough because of the number of characters.