JSFiddle - React, Tailwind, and code Playground

by James Connolly

HTML

<div id="radioWrapper">

  <input class="product_selection" name="selector" value="1" type="radio" id="1" />
  <input class="product_selection" name="selector" value="2" type="radio" id="2" />
  <input class="product_selection" name="selector" value="2" type="radio" id="99992" />

</div>


<div id="wrapper">

  <div id="product_1">
    Product 1
  </div>

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

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

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);
}