JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
        <input name="TXT870" type="hidden" value="Option 1">
        <div class="col-xs-2">
            <div class="ez-radio">
                <input class="clearBorder ez-hide" name="CAG3" onclick=
                "javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);"
                type="radio" value="870_625_0_625">
            </div><input name="CAG3QF1" type="hidden" value="0">
        </div>
        <div class="col-xs-7">
            <span>Option 1</span> <input class="transparentField" name=
            "opt1" readonly size="14" type="text" value=" - Add $5.00">
        </div>
    </div>
    
     <div class="row">
        <input name="TXT870" type="hidden" value="Option 1">
        <div class="col-xs-2">
            <div class="ez-radio">
                <input class="clearBorder ez-hide" name="CAG3" onclick=
                "javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);"
                type="radio" value="870_625_0_625">
            </div><input name="CAG3QF1" type="hidden" value="0">
        </div>
        <div class="col-xs-7">
            <span>Option 2</span> <input class="transparentField" name=
            "opt2" readonly size="14" type="text" value=" - Add $5.00">
        </div>
    </div>
    
     <div class="row">
        <input name="TXT870" type="hidden" value="Option 1">
        <div class="col-xs-2">
            <div class="ez-radio">
                <input class="clearBorder ez-hide" name="CAG3" onclick=
                "javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);"
                type="radio" value="870_625_0_625">
            </div><input name="CAG3QF1" type="hidden" value="0">
        </div>
        <div class="col-xs-7">
            <span>Option 3</span> <input class="transparentField" name=
            "opt3" readonly size="14" type="text" value=" - Add $5.00">
        </div>
    </div>

CSS

.bold {
      font-weight: bold;
}

JavaScript

(function($) {
    $.fn.ezMark = function(options) {
        options = options || {};
        var defaultOpt = {
            checkboxCls: options.checkboxCls || 'ez-checkbox',
            radioCls: options.radioCls || 'ez-radio',
            checkedCls: options.checkedCls || 'ez-checked',
            selectedCls: options.selectedCls || 'ez-selected',
            hideCls: 'ez-hide'
        };
        return this.each(function() {
            var $this = $(this);
            var wrapTag = $this.attr('type') == 'checkbox' ?
                '<div class="' + defaultOpt.checkboxCls + '">' :
                '<div class="' + defaultOpt.radioCls + '">';
            if ($this.attr('type') == 'checkbox') {
                $this.addClass(defaultOpt.hideCls).wrap(wrapTag)
                    .change(function() {
                        if ($(this).is(':checked')) {
                            $(this).parent().addClass(
                                defaultOpt.checkedCls);
                        } else {
                            $(this).parent().removeClass(
                                defaultOpt.checkedCls);
                        }
                    });
                if ($this.is(':checked')) {
                    $this.parent().addClass(defaultOpt.checkedCls);
                }
            } else if ($this.attr('type') == 'radio') {
                $this.addClass(defaultOpt.hideCls).wrap(wrapTag)
                    .change(function() {
                        $('input[name="' + $(this).attr(
                            'name') + '"]').each(
                            function() {
                                if ($(this).is(
                                    ':checked')) {
                                    $(this).parent().addClass(
                                        defaultOpt.selectedCls
                                    );
                                } else {
                                    $(this).parent().removeClass(
             ...