JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="submit" value="Add" class="submit1" name="btnGo" id="btnGo" />

<div id="z" style="margin: 0px auto; width:800px; height:30px;"></div>

	<div id="tabDiv" >
		<ul>
			<li class="tabWidth110" ><a href="#tabs-Detail" >Detail</a></li>
		</ul>
		<div id="tabs-Detail"  >
			<div id="y" style="margin: 0px auto; width:800px; height:30px;"></div>
		</div>
	</div>

CSS

.ui-icon-check {
    background-position: -64px -144px !important;
    background-position-x: -64px;
    background-position-y: -144px;
}

JavaScript

$('#btnGo').unbind('click').on('click', function(e) {
		e.preventDefault();

			$('#z')
				.html('<label for="wsKh"></label><input Type="checkbox" name="wsKh" id="wsKh" checked="checked "/>' +
							'<label for="wsKh1"></label><input Type="checkbox" name="wsKh1" id="wsKh1" checked="checked " disabled="disabled" />');
			$('#wsKh,#wsKh1').checkboxradio();

			$('#y')
				.html('<label for="wsyKh"></label><input Type="checkbox" name="wsyKh" id="wsyKh" checked="checked "/>' +
							'<label for="wsyKh1"></label><input Type="checkbox" name="wsyKh1" id="wsyKh1" checked="checked " disabled="disabled" />');
			$('#wsyKh,#wsyKh1').checkboxradio();

		});

		$('#tabDiv').tabs({
			collapsible: true,
			activate: function (e, ui) {
				var wsActive = $("#tabDiv").tabs("option", "active");
				fncReloadTabPanel(wsActive,"N");
			}
		});