JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<div class="container">
	<input type="radio" name="test" value="Radio 1" />
	<input type="radio" name="test" value="Radio 2" />
	<input type="radio" name="test" value="Radio 3" />
	<input type="radio" name="test" value="Radio 4" />
</div>

CSS

button {
	border: solid 1px #ddd;
	padding: 5px 10px;
	background: #e5e5e5;
}

button:focus {
	border: solid 1px #000;
	outline: none;
}

.left {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.right {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

JavaScript

var radios = $('input[type="radio"]');
console.log(radios.length)
var container = radios.parent();
//radios.hide();
$.each(radios, function(i, o){
	var clss;
	var el;
	switch(true){
		case (i == 0):
			clss = 'left';
			break;
		case ( i == (radios.length - 1) ):
			clss = 'right';
			break;
		default:
			clss = 'middle';
			break;
	}
	el = $('<button class="' + clss + '">' + $(o).val() + '</button>');
	container.append(el);
	el.on('click', function(){
		var v = $(this).text();
		$('input[type="radio"][value="' + v + '"]').prop('checked', true);
	});
});