JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
            <div class="bg">
            <table style="width: 100%;" cellspacing="0" cellpadding="5">
                <tbody>
                    <tr>
                        <td style="width: 25%; text-align: left; vertical-align: middle;"><input name="bgcolor" type="radio" data-class="transBg" class="eaBtn">Transparent</td>
                        <td style="width: 25%; text-align: left; vertical-align: middle;"><input name="bgcolor" type="radio" data-class="darkBg" class="eaBtn">Dark</td>
                        <td style="width: 25%; text-align: left; vertical-align: middle;"><input name="bgcolor" type="radio" data-class="lightBg" class="eaBtn">Light</td>
                        <td style="width: 25%; text-align: left; vertical-align: middle;"><input name="bgcolor" type="radio" data-class="customBg" class="eaBtn">Custom</td>
                    </tr>
                </tbody>
            </table>
            </div>
 
            <div class="eaStaff">
            TEST
            </div>

CSS

.eaStaff { width:200px; height:200px; background:red; }
.transBg { background:transparent; }
.darkBg { background:#000; }
.lightBg { background:#eee; }
.customBg { background:#660000; }

JavaScript

$('input.eaBtn[type="radio"]').click(function (e) {
		e.preventDefault();
		console.log($(this).data('class'))
		$('.eaStaff').removeClass('transBg darkBg lightBg customBg');
		$('.eaStaff').addClass($(this).data('class'));
		//$(this).attr('checked', true);
	});