JSFiddle - React, Tailwind, and code Playground

by Santosh Thakur

HTML

<label class="cursor" for="price0">
  <span class="price">Included</span>
  <input name="rate" value="$15.00" type="radio" class="" id="price0" checked="checked">
</label>

<label class="cursor" for="price1">
  <span class="price">$25.00</span>
  <input name="rate" value="$25.00" type="radio" class="" id="price1">
</label>

<label class="cursor" for="price2">
  <span class="price">$35.00</span>
  <input name="rate" value="$35.00" type="radio" class="" id="price2">
</label>

JavaScript

var bestPriceIncluded = $('input[name="rate"]');
bestPriceIncluded.change(function() {
  changePrice();
});

function changePrice() {
  bestPriceIncluded.each(function(index, element) {
    var currentValue = $(element).val();
    if ($(element).prop('checked')) {
      var value = $(element).val();
      $(element).parent().css('color', '#52beaf');
      $(element).parent().find('.price').text('Included');
    } else {
      $(element).parent().css('color', '');
      $(element).parent().find('.price').text(currentValue);
    }
  });
}