JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<div class="form-radios">

<div class="form-item" id="amount-1-wrapper">
 <label class="option" for="edit-submitted-donation-amount-1">
 <input type="radio" id="amount-1" name="submitted" value="20" class="form-radio">10</label>
</div>

<div class="form-item" id="amount-2-wrapper">
 <label class="option" for="edit-submitted-donation-amount-2">
 <input type="radio" id="amount-2" name="submitted" value="20" class="form-radio">20</label>
</div>

<div class="form-item" id="amount-3-wrapper">
 <label class="option" for="edit-submitted-donation-amount-3">
 <input type="radio" id="amount-3" name="submitted" value="30" class="form-radio">30</label>
</div>

<div class="form-item" id="amount-4-wrapper">
 <label class="option" for="edit-submitted-donation-amount-4">
 <input type="radio" id="amount-4" name="submitted" value="40" class="form-radio">40</label>
</div>

<div class="form-item" id="amount-5-wrapper">
 <label class="option" for="amount-5">
 <input type="radio" id="amount-5" name="submitted" value="50" class="form-radio">50</label>
</div>

</div>

JavaScript

$("input").each(function() {
  $(this).addClass($(this).attr("value"));
});

// this does not work
/*
$("input").each(function() {
  $(this).addClass($('radio-class-' + this).attr("value"));
});
*/