JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<button data-radio-name="animals" data-radio-value="pig">
  Pig
</button>
<button data-radio-name="animals" data-radio-value="cow">
  Cow
</button>
<button data-radio-name="animals" data-radio-value="chicken">
  Chicken
</button>

CSS

[data-radio-selected='true'] {
  background: red;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const radioGroups = {}

  document.querySelectorAll('[data-radio-name]').forEach( el => {
    const name = el.dataset.radioName;
    const value = el.dataset.radioValue;
    const selected = el.dataset.radioSelected === 'true';

    // Register radio
    radioGroups[name] = radioGroups[name] || {
      radios: [],
      selected: null
    };

    radioGroups[name].radios.push(el);

    if ( selected && radioGroups[name].selected == null ) {
      radioGroups[name].selected = value;
    }

    // attach listeners
    el.addEventListener('click', () => {
      radioGroups[name].radios.forEach( el => {
        el.dataset.radioSelected = 'false';
      })

      el.dataset.radioSelected = 'true';
      radioGroups[name].selected = value;
    })
  })
})