Dynamically link radio button tabs to content div

I initially had some tabs created with radio buttons and labels which are linked to corresponding divs using their IDs and was working fine. But the problem is I am now creating the radio button tabs and their corresponding divs dynamically and wish to still allow my css to know which one should be open when a radio button is checked.

My CSS:

  #tab-1:checked~.content #content-1,
  #tab-2:checked~.content #content-2,
  #tab-3:checked~.content #content-3,
  #tab-4:checked~.content #content-4,
  #tab-4:checked~.content #content-5 {
      display: block;
  }

With the above initially, when the radio button with id of tab-1 is checked, the div with id of content-1 is displayed but right now this will no longer work for me as I am now creating the radio buttons dynamically using incoming IDs from my DB like: #tab-100, #tab-101, #tab-102 and the divs as well #content-100, #content-101, #content-102. I need my CSS to be dynamic as well so when #tab-100 is checked, it automatically displays #content-100. I am aware I can do this with javascript but I want to believe that there is a way to do it with CSS.

Answer

I later resorted to using javascript and dynamically created a style element.

HTML:

<input type="radio" id="tab-231" class="tab" name="number" value="first"><label for="tab-231">First</label><br>
<input type="radio" id="tab-232" class="tab" name="number" value="second"><label for="tab-232">Second</label><br>
<input type="radio" id="tab-233" class="tab" name="number" value="third"><label for="tab-233">Third</label><br>

<div class="tab-content" class="tabs">First content</div>
<div class="tab-content" class="tabs">Second content</div>
<div class="tab-content" class="tabs">Third content</div>

JS:

const tabs = $('.tabs') //getting all the inputs with class tab
let css = '';

   //dynamically select the tab elements
   for ( const tab of tabs ) {
      const split = tab.id.split('-');
      const id = split[split.length - 1];
      css += `
         #tab-${id}:checked~.content #content-${id},
      `;
   }

   css = css.trim().slice(0, -1) //make sure to remove the trailing ',' in the css text
   css += `
      {
         display: block;
      }
   `;

   //create style element and append to document head
   const style = document.createElement('style');
   document.head.appendChild(style);

   if (style.styleSheet)
      style.styleSheet.cssText = css;
   else
      style.appendChild(document.createTextNode(css));

this answer was helpful.