JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
	<style>
	
	</style>
	<script>
		$(document).on("pageinit", "#page1", function(){

			$("#checkFirst").click(function(){
				$("input[type='radio']:first").attr("checked", "checked");
				$("input[type='radio']").checkboxradio("refresh");
			});
			$("#checkSecond").click(function(){
				$("input[type='radio']:eq(1)").attr("checked", "checked");
				//$("input[type='radio']").checkboxradio("refresh");
			});
			$("#checkLast").click(function(){
				$("input[type='radio']:last").attr("checked", "checked");
				$("input[type='radio']").checkboxradio("refresh");
			});
			$("#uncheckAll").click(function(){
				$("input[type='radio'][checked]").removeAttr("checked");
				$("input[type='radio']").checkboxradio("refresh");
			});
		});
	</script>
</head>
<body>
	<div data-role="page" id="page1">
		<div data-role="header">
			<h1>Header</h1>
		</div>

		<div data-role="content">
			<div data-role="fieldcontain"  id="div_radio" class="radiogroup">
			    <fieldset data-role="controlgroup">
			        <input type="radio" name="radio-pieces" id="radio-choice-1" value="3" />
			        <label for="radio-choice-1">1 to 3</label>

			        <input type="radio" name="radio-pieces" id="radio-choice-2" value="5"  />
			        <label for="radio-choice-2">4 to 5</label>

			        <input type="radio" name="radio-pieces" id="radio-choice-3" value="6"  />
			        <label for="radio-choice-3">over 5</label>
			    </fieldset>
			</div>
			
			<button id="checkFirst">Check First</button>
			<button id="checkSecond">Check Second</button>
			<button id="checkLast">Check Last</button>
			<button...