JSFiddle - React, Tailwind, and code Playground

HTML

<select id="source" name="select_faction" style="visibility:hidden; position:fixed;">
<option value="0">Not Recruiting</option>
<option value="1">Recruiting</option>
</select>

        <div align="left">
        <fieldset id="faction-settings">
            <legend align="left"><span>Faction Actions</span></legend>
                    <ol>
                        <li><label for="forename" title="Enter your forename" class="required">Change Faction Name:<span>*</span></label>
                            <input name="forename" type="text" id="forename" value="Enter your first name" />    
                        </li>
                        <li>
                        <div style="padding:0px; margin:0px;">
                            <label for="surname" title="Enter your surname" class="required">Change Faction Status:</label>    
                            <div id="formatted-positioning" align="left"></div>
                        </div>
                        </li>
                        <li>
                            <label for="email" title="Enter your email address" class="required">Email Address<span>*</span></label>
                            <input type="text" id="email" name="email" />
                        </li>
                        <li>
                            <label for="occupation" title="Choose your occupation" class="required">Occupation<span>*</span></label>
                            <input class="radio" type="radio" id="occupation" name="occupation" value="Designer" /> Designer
                            <input class="radio" type="radio" id="occupation" name="occupation" value="Developer" /> Developer
                            <input class="radio" type="radio" id="occupation" name="occupation" value="Manager" /> Manager
                        </li>
                    </ol>
        </fieldset>
        </div>

CSS

/* custom drop down select menu */
#formatted-positioning { position:relative; margin-bottom:0px; margin-top:0px; font-size:9px; padding:0px; display:inline-block; margin:0px; }
.desc { color:#6b6b6b; z-index:999; }
.desc a {color:#0092dd; z-index:999;}
.dropdown { position:relative; top:0px; left:0px; margin:0px; z-index:999; font-size:9px; padding:0px; }
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; margin-top:-1px; padding:0px; z-index:999; }
.dropdown dd { position:relative; z-index:999;  }
.dropdown a, .dropdown a:visited { color:#ffffff; text-decoration:none; outline:none; z-index:99;  padding-left:5px; }
.dropdown a:hover { color:#ffffff; z-index:999; }
.dropdown dt a:hover { color:#ffffff; border: 1px solid #353537; z-index:999; }
.dropdown dt a {background:#050506 url(../images/global/icons/arrow.png) no-repeat scroll right center; display:inline-block; padding-right:0px; border:1px solid #434345; width:auto; min-width:190px; padding-left:5px; z-index:999; padding:2px;}
.dropdown dt a span {cursor:pointer; display:block;}
.dropdown dd ul { background:#050506 none repeat scroll 0 0; border:1px solid #434345; color:#C5C0B0; display:none; left:0px; padding:0px 0px; position:absolute; top:2px; width:auto; min-width:206px; list-style:none; z-index:999; }
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:0px; display:block; width:auto; min-width:206px;}
.dropdown dd ul li a:hover { background-color:#333333; z-index:999; width:94%; }
.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.flagvisibility { display:none;}

fieldset { margin:15px; margin-top:35px; margin-bottom:20px;
        padding:             0;
        background-color:#333333;
        width:500px;
        float:left;
        border:solid 2px #505050;
        clear:both; zoom:1;
        position:relative;
        overflow:hidden;
        font-family:Verdana, Geneva, sans-serif;
        font-size:10px;
}

legend {  
        text-transform:      ...

JavaScript

//custom drop down menu                       
        $(document).ready(function() {
            createDropDown();
            
            $(".dropdown dt a").click(function() {
                $(".dropdown dd ul").toggle();
            });
 
            $(document).bind('click', function(e) {
                var $clicked = $(e.target);
                if (! $clicked.parents().hasClass("dropdown"))
                    $(".dropdown dd ul").hide();
            });
                        
            $(".dropdown dd ul li a").click(function() {
                var text = $(this).html();
                $(".dropdown dt a").html(text);
                $(".dropdown dd ul").hide();
                
                var source = $("#source");
                source.val($(this).find("span.value").html())
            });
        });
        
        function createDropDown(){
            var source = $("#source");
            var selected = source.find("option[selected]");
            var options = $("option", source);
            
            $("#formatted-positioning").append('<dl id="target" class="dropdown"></dl>')
            $("#target").append('<dt><a href="#">' + selected.text() + 
                '<span class="value">' + selected.val() + 
                '</span></a></dt>')
            $("#target").append('<dd><ul></ul></dd>')
 
            options.each(function(){
                $("#target dd ul").append('<li><a href="#">' + 
                    $(this).text() + '<span class="value">' + 
                    $(this).val() + '</span></a></li>');
            });

        }