HTML CSS Tab Controls - Multiple tab controls on the same page

Question

I grabbed a simple tab control from the css tricks site and its working great for me, except when I have two tab controls on the same page, clicking the bottom control simply changes the tab page of the top control.

The CSS Tricks page with the original code is here

Changing the name= attribute for the second group doesn't fix it.

Renaming the id's of each tab in the second group also doesn't fit it.

Is there a way to have two independently operating tabs on the same page ?

FWIW the HTML and CSS are fairly simple:

        .tabs {
          position: relative;   
          min-height: 100px;    
          clear: both;
          margin: 25px 0;
        }
        .tabs .tab {
          float: left;
        }
        .tabs .tab label {
          background: #eee; 
          padding: 5px 15px 5px 15px; 
          border: 1px solid #ccc; 
          position: relative;
          left: 1px; 
          cursor: pointer;
        }
        .tabs .tab [type=radio] {
          display: none;   
        }
        .tabs .content {
          position: absolute;
          top: 18px;
          left: 0;
          background: white;
          right: 0;
          bottom: 0;
          padding: 20px;
          border: 1px solid #ccc; 
          overflow:auto;
        }
        .tabs [type=radio]:checked ~ label {
          background: white;
          border-bottom: 1px solid white;
          z-index: 2;
        }
        .tabs [type=radio]:checked ~ label ~ .content {
          z-index: 1;
        }

    <div class="tabs">
        
       <div class="tab">
           <input type="radio" id="tab-1" name="tab-group-1" checked>
           <label for="tab-1">Tab One</label>
           
           <div class="content">
               stuff1
           </div> 
       </div>
        
       <div class="tab">
           <input type="radio" id="tab-2" name="tab-group-1">
           <label for="tab-2">Tab Two</label>
           
           <div class="content">
               stuff2
           </div> 
       </div>
        
        <div class="tab">
           <input type="radio" id="tab-3" name="tab-group-1">
           <label for="tab-3">Tab Three</label>
         
           <div class="content">
               stuff3
           </div> 
       </div>
        
    </div>

    <div class="tabs">
        
       <div class="tab">
           <input type="radio" id="tab-1" name="tab-group-1" checked>
           <label for="tab-1">Tab One</label>
           
           <div class="content">
               stuff4
           </div> 
       </div>
        
       <div class="tab">
           <input type="radio" id="tab-2" name="tab-group-1">
           <label for="tab-2">Tab Two</label>
           
           <div class="content">
               stuff5
           </div> 
       </div>
        
        <div class="tab">
           <input type="radio" id="tab-3" name="tab-group-1">
           <label for="tab-3">Tab Three</label>
         
           <div class="content">
               stuff6
           </div> 
       </div>
        
    </div>

Answer 1

The part to change is the label and the id:

<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>

I've edited your snippet.

        .tabs {
          position: relative;   
          min-height: 100px;    
          clear: both;
          margin: 25px 0;
        }
        .tabs .tab {
          float: left;
        }
        .tabs .tab label {
          background: #eee; 
          padding: 5px 15px 5px 15px; 
          border: 1px solid #ccc; 
          position: relative;
          left: 1px; 
          cursor: pointer;
        }
        .tabs .tab [type=radio] {
          display: none;   
        }
        .tabs .content {
          position: absolute;
          top: 18px;
          left: 0;
          background: white;
          right: 0;
          bottom: 0;
          padding: 20px;
          border: 1px solid #ccc; 
          overflow:auto;
        }
        .tabs [type=radio]:checked ~ label {
          background: white;
          border-bottom: 1px solid white;
          z-index: 2;
        }
        .tabs [type=radio]:checked ~ label ~ .content {
          z-index: 1;
        }

    <div class="tabs">
        
       <div class="tab">
           <input type="radio" id="tab-1" name="tab-group-1" checked>
           <label for="tab-1">Tab One</label>
           
           <div class="content">
               stuff1
           </div> 
       </div>
        
       <div class="tab">
           <input type="radio" id="tab-2" name="tab-group-1">
           <label for="tab-2">Tab Two</label>
           
           <div class="content">
               stuff2
           </div> 
       </div>
        
        <div class="tab">
           <input type="radio" id="tab-3" name="tab-group-1">
           <label for="tab-3">Tab Three</label>
         
           <div class="content">
               stuff3
           </div> 
       </div>
        
    </div>

    <div class="tabs">
        
       <div class="tab">
           <input type="radio" id="tab-4" name="tab-group-1" checked>
           <label for="tab-4">Tab One</label>
           
           <div class="content">
               stuff4
           </div> 
       </div>
        
       <div class="tab">
           <input type="radio" id="tab-5" name="tab-group-1">
           <label for="tab-5">Tab Two</label>
           
           <div class="content">
               stuff5
           </div> 
       </div>
        
        <div class="tab">
           <input type="radio" id="tab-6" name="tab-group-1">
           <label for="tab-6">Tab Three</label>
         
           <div class="content">
               stuff6
           </div> 
       </div>
        
    </div>