JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id='outer'>
  <div id='inner'>
    <label for='flipInput'> Active: </label>
    <input type="checkbox" name='flipInput' data-role='flipswitch' />
  </div>
</div>

JavaScript

$(function() {
  var orig = $("#inner");
  var label = $("#inner label");
  var flip = $("#inner input[data-role='flipswitch']").clone();
  var parent = $("#inner").parent();
  $("inner input[data-role='flipswitch']").flipswitch( "destroy" );
  $("#inner").remove();
  parent.append(flip);
  flip.flipswitch();
})