JSFiddle - React, Tailwind, and code Playground

by Erik Woods

HTML

<form>
    <input class="select-term-option" data-select-term id="select-term-option-30" name="select-term-options" type="radio" value="30" />
    <label for="select-term-option-30">30 years</label>
    <input class="select-term-option" data-select-term id="select-term-option-25" name="select-term-options" type="radio" value="25" />
    <label for="select-term-option-25">25 years</label>
    <input class="select-term-option" data-select-term id="select-term-option-20" name="select-term-options" type="radio" value="20" />
    <label for="select-term-option-20">20 years</label>
    <input class="select-term-option" data-select-term id="select-term-option-15" name="select-term-options" type="radio" value="15" />
    <label for="select-term-option-15">15 years</label>
    <input class="select-term-option" data-select-term id="select-term-option-10" name="select-term-options" type="radio" value="10" />
    <label for="select-term-option-10">10 years</label>
</form>

<div id="result"></div>

SCSS

.select-term-option {
    left: -99999px;
    position: fixed;
    + label {
        display: block;
        cursor: pointer;
    }
    + label:hover {
        background: #ff0;
    }
}

#result::before {
    content: 'Value is: '
}

JavaScript

$('[data-select-term]').on('change', function() {
    $('#result').html($(this).val());
});