JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>MikroTik Routers and Wireless</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

        <script type="text/javascript">

        
        </script>
    </head>
    <body>
<table border="0" cellspacing="0" cellpadding="2">
<tr>
    <td>
        <div>
            1 <select name="pattern_2" onchange="doTheThing()">
                <option value="1">true</option>
                <option value="2" selected="selected" >false</option>
            </select>
        </div>
    </td>
</tr>
<tr>
    <td>
        <div>
            2 <input onclick="doTheThing()" name="pattern_8" value="5" type="radio"/>
        </div>
        <div>
            3 <input onclick="doTheThing()" name="pattern_9" value="6" type="radio" checked="checked" />
        </div>
        <div>
            4 <input onclick="doTheThing()" name="pattern_12" value="7" type="radio"/>
        </div>
    </td>
</tr>

</table>
    
    </body>
</html>

JavaScript

jQuery.fn.sort = (function(){
             
             var sort = [].sort;
             
             return function(comparator, getSortable) {
                 
                 getSortable = getSortable || function(){return this;};
                 
                 var placements = this.map(function(){
                     
                     var sortElement = getSortable.call(this),
                         parentNode = sortElement.parentNode,
                         
                         // Since the element itself will change position, we have
                         // to have some way of storing it's original position in
                         // the DOM. The easiest way is to have a 'flag' node:
                         nextSibling = parentNode.insertBefore(
                             document.createTextNode(''),
                             sortElement.nextSibling
                         );
                     
                     return function() {
                         
                         if (parentNode === this) {
                             throw new Error(
                                 "You can't sort elements if any one is a descendant of another."
                             );
                         }
                         
                         // Insert before flag:
                         parentNode.insertBefore(this, nextSibling);
                         // Remove flag:
                         parentNode.removeChild(nextSibling);
                         
                     };
                     
                 });
                
                 return sort.call(this, comparator).each(function(i){
                     placements[i].call(getSortable.call(this));
                 });
                 
             };
             
         })();
 
         $(document).ready(function() {
                 doTheThing();
         });
         function doTheThing() {
               
             ...