title: How would I re write this css with Jquery or javascript?
body: <p>I'm trying to re write this as jquery or js because I need add a loop to tab-panel for example .tab-panel1, .tab-panel2 in order for multiple tabs to be used on the page and not affect eachother. </p>
  
  <pre><code>  &lt;div class="tab-panels&lt;?php echo $count ?&gt;"&gt;
      &lt;section id="about&lt;?php echo $count ?&gt;"class="tab-panel"&gt;
      &lt;/section&gt;
      &lt;section id="contact-sbf&lt;?php echo $count ?&gt;"class="tab-panel"&gt;
      &lt;/section&gt;
    &lt;/div&gt;
  
  .tabset &gt; input:first-child:checked ~ .tab-panels &gt; .tab-panel:first-child,
  .tabset &gt; input:nth-child(3):checked ~ .tab-panels &gt; .tab-panel:nth-child(2),
  .tabset &gt; input:nth-child(5):checked ~ .tab-panels &gt; .tab-panel:nth-child(3),
  .tabset &gt; input:nth-child(7):checked ~ .tab-panels &gt; .tab-panel:nth-child(4),
  .tabset &gt; input:nth-child(9):checked ~ .tab-panels &gt; .tab-panel:nth-child(5),
  .tabset &gt; input:nth-child(11):checked ~ .tab-panels &gt; .tab-panel:nth-child(6) {
    display: block;
  }
  </code></pre>