$(document).ready(function() {
    $('div.message-error').hide();
    $('div.message-success').hide();
    $('ul#characterList').css( 'margin-left', '120px' );

    function removeCharacter(characterID, characterName) {
        event.preventDefault();
        $(this).parent().remove();

        var option = $( '<option value=' + characterID + '>' + characterName + '</opton>' );

        $( '#charactersDrop' ).append( option );
    }

    // 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 );
        }
    }

    $("#handlerForm").validate({
        rules: {
            firstName: {
                required: true
            },
            lastName: {
                required: true
            },
            userName: {
                required: true,
                minlength: 5
            },
            password: {
                required: true,
                minlength: 5
            },
            password2: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            },
            email: {
                required: true,
                email: true
            },
            statusID: {
                required: true
            },
            isAdmin: {
                required: true
            }
        },
        messages: {
            firstName: "Please enter your first name!",
            lastName: "Please enter your last name!" ,
            userName: {
                required: "Please enter a username!",
                minlength: "Your username must consist of at least 5 characters!"
            },
            password: {
                required: "Please provide a password!",
                minlength: "Your password must be at least 5 characters long!"
            },
            password2: {
                required: "Please provide a password!",
                minlength: "Your password must be at least 5 characters long!",
                equalTo: "Please enter the same password as above!"
            },
            statusID: "Please enter the handler's status!",
            isAdmin: "Please enter the handler's administrative status!",
            email: "Please enter a valid email address!"
        },
        submitHandler: function(form) {
            var handlerID = $("input#handlerID").val();
            var defaultChar = $("select#charactersDrop option:selected").text();
            var userName = $("input#userName").val();
            var firstName = $("input#firstName").val();
            var lastName = $("input#lastName").val();
            var password = $("input#password").val();
            var email = $("input#email").val();
            var statusID = $("select#statusID").val();
            var isAdmin = $("select#isAdmin").val();
            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 + '&firstName=' + firstName + '&lastName=' + lastName + '&email=' + email + '&statusID=' + statusID + '&isAdmin=' + isAdmin + '&characterIDList=' + characterIDList + '&handlerID=' + handlerID + '&editHandler=True';
            $.ajax({
                type: "POST",
                url: "processes/handlers.php",
                data: dataString,
                success: function(myNewVar) {
                    if (myNewVar == 'good') {
                        $('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", function() {
                                 $('#content').load('mods/handlers.php');
                        });
                    } else {
                        $('div.message-success').hide();
                        $("div.message-error").html("<h6>Operation unsuccessful</h6><p>" + userName + " already exists in the database.</p>");
                        $("div.message-error").show();
                    }
                }
            });
            return false;
        }
    });
});

<label for="charactersDrop">Characters</label>
            <select class="dropdown" name="charactersDrop" id="charactersDrop" title="Characters Dropdown">
                <option value="">- Select -</option>
                <?php
                    while ( $row = mysqli_fetch_array (  $charactersByHandlerResult, MYSQL_ASSOC ) ) {
                        print "<option value=\"".$row['ID']."\">".$row['characterName']."</option>\r";
                    }
                ?>
            </select>
            <input type="button" value="Add Character" class="" onclick="HandlerCharacters()"/>
            <ul id="characterList">
              <?php mysqli_data_seek( $handlerResult, 0 ) ?>
              <?php while($row = mysqli_fetch_array ( $handlerResult, MYSQL_ASSOC )): ?>
                <li><?php echo htmlentities($row['characterName']); ?> <a href="#" onclick="removeCharacter(<?php echo $row['ID'] . ','. "'" . $row['characterName'] . "'"; ?>);">Remove</a></li>
              <?php endwhile; ?>
            </ul>