Compeitors Separation

[Xtremer360]

All of this code is from the same file. I'm trying to figure out how to accomplish this so if anyone has any opinions please suggest them as I'm lost as to the most efficient way to do this. This is what I have so far. What I'm attempting to do is after it gets the numSides variable established (used for match separation). The user will be able to select the competitors for both sides. As of right now I only have one dropdown and button that goes into the first UL but can anyone think of any other ways I could possibly do this or if this is a good way can anyone expand on this?

 

<div class="field required">
            <label for="competitors">Competitors:</label><ul id="competitors" style="list-style: none; margin-left: 195px;"></ul> VS. <ul id="competitors2" style="list-style: none; margin-left: 195px;"></ul> 
            <select class="dropdown" name="charactersdrop" id="charactersdrop" title="Characters Dropdown" style="margin-left: 195px;">
                <option value="0">- Select -</option>
               <?php
                $query = 'SELECT id, `character` FROM characters';
                $result = mysqli_query ( $dbc, $query ); // Run The Query
                while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) { 
                    print "<option value=\"".$row['id']."\">".$row['character']."</option>\r";
                }
                ?>
            </select>
            <input type="button" value="Add Character" class="" onclick="Competitors()"/>
</div>

 

function matchSides() {
    var numSides = $('#matchtypesdrop option:selected').val();
    if (numSides > 0 ) {
        // Create the Vs. for separation.
        
    }else {
        
    }
}