jquery validate, add, delete email address

I am trying to validate an email address and then add to a multi select box. I am using qTip and jquery validate to do the trick. So when hit Add button, the script should validate and add to the select box below. Validating is working fine, but for adding am facing little difficulty adding the method to main qTip script. Can anyone help me in integrating the below

Here is the demo

Add Script

  $(document).ready(function() {
 $("#addButton").click(function() {
    var arr = new Array();
    $('#emailRecipients option').each(function(){
        arr.push($(this).attr('value'))
    });
    var duplicateFla开发者_如何学Cg = false;
    for(var i = 0; i < arr.length; i++) {
        if(arr[i].toString() == $('#validate').val()) {
            duplicateFlag = true;
            break;
        }
    }

    if(duplicateFlag) {
        alert('sorry...');
    } else {
        $('#emailRecipients').append($("<option>" + $('#validate').val() + "</option>"));
    }
    return false;
});
    });

---

Since you're validating by string comparison you can tighten up your code below. Also, you'll want to change the jquery you have in your .append() method to be raw HTML and add the email address to the options value.

$(document).ready(function(){

    $("#addButton").click(function(){
        var emails = [];
        $("#emailRecipients option").each(function(){
            emails.push($(this).val());
        });

        if( $.inArray($('#validate').val(), emails) != -1 ){
            alert("sorry...");
        }else{
            $('#emailRecipients').append("<option value='" + $('#validate').val() + "'>" + $('#validate').val() + "</option>");
        }
    });

});