JSFiddle - React, Tailwind, and code Playground

by James Connolly

HTML

<h4>Color</h4>
<ul class="chair-options color-options" id="radioWrapper">
  <li>
    <label>Red</label>
    <input class="product_selection" name="selector" value="1" type="radio" id="1" checked="checked" />
  </li>
  <li>
    <label>Green</label>
    <input class="product_selection" name="selector" value="2" type="radio" id="2" />
  </li>
  <li>
    <label>Blue</label>
    <input class="product_selection" name="selector" value="2" type="radio" id="99992" />
  </li>
</ul>

<div id="wrapper">

  <div id="product_1" style="display:none;">
    Product 1
  </div>

  <div id="product_2" style="display:none;">
    Product 2
  </div>

  <div id="product_99992" style="display:none;">
    Product 3
  </div>

</div>

CSS

li {
  background: pink;
  display: flex;
  flex-flow: row reverse;
}

JavaScript

var elements, current, last;
onLoadSetEvents();

function onLoadSetEvents() {
  //Initially creates the event listeners
  elements = document.getElementsByClassName('product_selection');
  
  for (var i = 0; i < elements.length; i++) 
    elements[i].onclick = selectProduct;
}

//Sets the correct div to be displayed
function selectProduct() {
  current = String(this.id);

  var el = document.getElementById("product_" + current);
  el.style.display = "block";

  if (last !== undefined)
    document.getElementById("product_" + last).style.display = "none";

  last = String(this.id);
}