JSFiddle - React, Tailwind, and code Playground

by jchaplin2

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<fieldset data-type="horizontal" data-bootstrap="radiogroup">
  <label>
    <input type="radio" name="g1" value="default" data-bind="checked: statusMsg">Recent
  </label>
  <label>
    <input type="radio" name="g1" value="order" data-bind="checked: statusMsg">By Number
  </label>
  <label>
    <input type="radio" name="g1" value="advanced" data-bind="checked: statusMsg">Advanced
  </label>
</fieldset>
<script>
$(document).ready(function() {
    $("*[data-bootstrap='radiogroup']")
        .each((index, element) => {
            var listOfRadioButtons = $(element).find('label').clone();
            $(element).children().remove();
            $(element)
                .append("<div class='btn-group col-lg-12 col-md-12 col-sm-12 col-xs-12 clearfix' data-toggle='buttons'></div>");
            $(element)
                .children(":first")
                .append(listOfRadioButtons)
                .find("label")
                .addClass("btn btn-primary")
                .css("width", (100 / listOfRadioButtons.length) + '%');
        });
	var viewModel = {
		statusMsg: ko.observable("default")
	}
	ko.applyBindings(viewModel);
});
</script>