JSFiddle - React, Tailwind, and code Playground

HTML

<div class="product-options">
  <div class="option-input">
    <input type="radio" value= "1" name="product-option" class="radio item" data-sku="1001" data-price="100" data-discount="20" data-save="20" data-after="80" />
  </div>
  <label class="option-detail">
    <span class="option-title">Item Title One</span>
    <span class="option-price">R100</span>
    <span class="option-was-price">R80</span>
    <span class="option-discount">Save R20</span>
    <span class="option-bought">Over 31 bought</span>
  </label>
</div>

<div class="product-options">
  <div class="option-input">
    <input type="radio" value= "2" name="product-option" class="radio item" data-sku="1002" data-price="200" data-discount="25" data-save="25" data-after="150"  />
  </div>
  <label class="option-detail">
    <span class="option-title">Item Title Two</span>
    <span class="option-price">R200</span>
    <span class="option-was-price">R150</span>
    <span class="option-discount">Save R50</span>
    <span class="option-bought">Over 31 bought</span>
  </label>
</div>

<input type="hidden" name="sku" value="" />
<div id="pricing"></div>
<div id="savings"></div>
<div id="discount"></div>

JavaScript

$(function(){
	$('.item').on('change',function(){
    $('#pricing').text('R'+($(this).data('price')));
    $('#savings').text('R'+($(this).data('after')));
    $('#discount').text(($(this).data('discount'))+'% OFF');
    $('input[name=sku]').val($(this).data('sku'));
  });
});