PHP - Preloading

My guess is I'll need a foreach loop with this but I'm a little unclear as to the bigger picture of the foreach because what I need is just foreach CharacterName and CharacterID that belongs to that handler needs to be put into the UL with a id of characterlist with an attached Remove Link to it that will remove it from the UL and append it back into the dropdown. I have something set up like that using jquery but how can I get the character and ID's preloaded into the ID and then afterwards have jquery take over the restwith the remove link and what to do with the appending.

Code: [Select]
$handlerID = $_GET['id'];
    $query = "SELECT
        characters.ID,
        characters.characterName,
        handlers.userName,
        handlers.password,
        handlers.firstName,
        handlers.lastName,
        handlers.email,
        handlers.isAdmin,
        handlers.statusID
    FROM
        handlers
        LEFT JOIN handlerCharacters
            ON handlerCharacters.handlerID =  handlers.ID
            LEFT JOIN characters
                ON characters.ID = handlerCharacters.characterID
    WHERE
        handlers.ID = '" . $handlerID . "'";
    $result = mysqli_query ( $dbc, $query ); // Run The Query
    $row = mysqli_fetch_array ( $result, MYSQL_ASSOC )
    ?>
    <script type="text/javascript">
    $(document).ready(function() {
        $('div.message-error').hide();
        $('div.message-success').hide();
        $('ul#characterList').css( 'margin-left', '120px' );
        $('li').remove('.characterName');
        $("input.submit").click(function() {
            $('div.message-error').hide();
            var handlerID = $("input#handlerID").val();
            var userName = $("input#userName").val();
          if (userName == "") {
                $("div.message-error").show();
                $("input#userName").focus();
                return false;
            }
            var password = $("input#password").val();
          if (password == "") {
                $("div.message-error").show();
                $("input#password").focus();
                return false;
            }
            var firstName = $("input#firstName").val();
          if (firstName == "") {
                $("div.message-error").show();
                $("input#firstName").focus();
                return false;
            }
            var lastName = $("input#lastName").val();
            if (lastName == "") {
                $("div.message-error").show();
                $("input#lastName").focus();
                return false;
             }
             var email = $("input#email").val();
             if (email == "") {
                $("div.message-error").show();
                $("input#email").focus();
                return false;
             }
             var statusID = $("select#statusID").val();
          if (statusID == "") {
                $("div.message-error").show();
                $("select#statusID").focus();
                return false;
             }
             var isAdmin = $("select#isAdmin").val();
             if (isAdmin == "") {
                $("div.message-error").show();
                $("select#isAdmin").focus();
                return false;
             } 
             var liElements = $("ul#characterList li");
             var characterIDList = "";
             for( var i = 0; i < liElements.length; i++ ) {
                var liElement = $( liElements[ i ] );
               
                // only start appending commas in after the first characterID
                if( i > 0 ) {
               characterIDList += ",";
                }
       
                // append the current li element's characterID to the list
                characterIDList += liElement.data( 'characterID' );
             }
             var dataString = 'userName=' + userName  + '&password=' + password + '&firstName=' + firstName + '&lastName=' + lastName + '&email=' + email + '&statusID=' + statusID + '&isAdmin=' + isAdmin + '&characterIDList=' + characterIDList + '&handlerID=' + handlerID + '&editHandler=True';
             $.ajax({
                 type: "POST",
                 url: "processes/handler.php",
                 data: dataString,
                 success: function() {
                     $('div.message-error').hide();
                     $("div.message-success").html("<h6>Operation successful</h6><p>" + userName + " saved successfully.</p>");
                     $("div.message-success").show().delay(10000).hide("slow");
                     $(':input','#handlerForm')
                     .not(':submit, :button')
                     .val('')
                     $("ul#characterList").empty();
                     return true;
                 }
            });
            return false;   
        });
    });
    </script>
   
    <!-- Form -->
    <form action="#" id="handlerForm">
    <fieldset>
    <legend>Edit Handler</legend>
            <div class="field required">
    <label for="userName">User Name</label>
    <input type="text" class="text" name="userName" id="userName" title="User Name" value="<?php echo $row['userName']; ?>"/>
    <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    </div>
            <div class="field required">
    <label for="password">Password</label>
    <input type="password" class="text" name="password" id="password" title="Password" value="<?php echo $row['password']; ?>"/>
                <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    </div>
            <div class="field required">
    <label for="firstName">First Name</label>
    <input type="text" class="text" name="firstName" id="firstName" title="First Name" value="<?php echo $row['firstName']; ?>"/>
                <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    </div>
            <div class="field required">
    <label for="lastName">Last Name</label>
    <input type="text" class="text" name="lastName" id="lastName" title="Last Name" value="<?php echo $row['lastName']; ?>"/>
                <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    </div>
            <div class="field required">
    <label for="email">Email</label>
    <input type="text" class="text" name="email" id="email" title="Email" value="<?php echo $row['email']; ?>"/>
                <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    </div>
            <div class="field required">
    <label for="statusID">Status</label>
                <select class="dropdown" name="statusID" id="statusID" title="Status">
                <option value="">- Select -</option>
                <?php
                $query = 'SELECT * FROM statuses';
                $result = mysqli_query ( $dbc, $query ); // Run The Query 
                while ( $status_row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) {
                        print "<option value=\"".$status_row['ID']."\" ";
if($status_row['ID'] == $row['statusID']) {
     print " SELECTED";
}
                        print ">".$status_row['statusName']."</option>\r";
                }
                ?>
                </select>
    <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    </div>
            <div class="field required">
    <label for="isAdmin">Administrator</label>
                <select class="dropdown" name="isAdmin" id="isAdmin" title="Administrator">
                <option value="">- Select -</option>
                <?php
                    $administrator = array('Yes', 'No');
                    foreach($administrator as $admin):
                ?>       
                <option value="<?php echo $admin; ?>"<?php if($admin == $row['isAdmin']): echo ' SELECTED'; endif; ?>><?php echo $admin; ?></option>
             
                <?php endforeach; ?>
                </select>
    <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    </div>
    </fieldset>
        <fieldset>
    <legend>Handler's Characters</legend>
            <div class="field">
    <label for="charactersDrop">Characters</label>
                <select class="dropdown" name="charactersDrop" id="charactersDrop" title="Characters Dropdown">
                <option value="">- Select -</option>
                <?php
                $query = 'SELECT ID, characterName FROM characters WHERE ID NOT IN (SELECT characterID FROM handlerCharacters) ORDER BY `characterName`';
                $result = mysqli_query ( $dbc, $query ); // Run The Query
                while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) { 
                    print "<option value=\"".$row['ID']."\">".$row['characterName']."</option>\r";
                }
                ?>
                </select>
                <input type="button" value="Add Character" class="" onclick="HandlerCharacters()"/>
                <ul id="characterList"></ul>
            </div>
            <input type="hidden" name="handlerID" id="handlerID" value="<?php echo $handlerID; ?>" />
            <input type="submit" class="submit" name="editHandler" id="editHandler" title="Submit Handler" value="Submit Handler" />
    </fieldset>
    </form>
    <!-- /Form -->
    <!-- Messages -->
    <div class="message message-error">
        <h6>Required field missing</h6>
        <p>Please fill in all required fields. </p>
    </div>
    <div class="message message-success">
        <h6>Operation succesful</h6>
        <p>Handler was added to the database.</p>
    </div>
    <!-- /Messages -->
   
    <script type="text/javascript" language="javascript">
    // Long version
    function HandlerCharacters() {
        function isDupe(which) {
            var result = false;
            $('ul#characterList li').each(function(i, e) {
                if ($(e).data('characterID') == which) {
                    result = true;
                    return false; // break out of .each()
                }
            });
            return result;
        }
        var characterID = $('#charactersDrop option:selected').val();
        var characterName = $('#charactersDrop option:selected').text();
        if (characterID > 0 && !isDupe(characterID)) {
        // Create the anchor element
        var anchor = $( '<a href="#">Remove</a>' ); 
       
        // Create a click handler for the anchor element
        anchor.click( function() {
        $( this ).parent().remove();
        return false;  // makes the href in the anchor tag ignored
        } );
       
        // Create the <li> element with its text, and then append the anchor inside it.
        var li = $( '<li>' + characterName + '&nbsp;</li>' ).append( anchor );
        li.data( 'characterID', characterID );
       
        // Append the new <li> element to the <ul> element
        $( '#characterList' ).append( li );
        }
    }
    </script>