How to append this data only once

Question

I have some returned xml that is being parsed and displayed with the submission of a form:

$("#Button").live('click',function(){
$("#Form").validate({
    submitHandler: function(form) {
        $('#prcs3').show();
        var dataString = $(form).serialize();
        $.ajax({
            type: $(form).attr('method'),
            url: form.action,
            data: dataString,
            clearForm: true,
            success: function(data) {
                var answer = $(data).find("td:eq(3)").text();
                var message = $(data).find("td:eq(5)").html();
                var $xml = $( message );
                if (answer==="True") {
                    $('#prcs3').hide();
                    $xml.find('license').each(function(){
                        var XXXCustomerID = $(this).find('FXCMCustomerID').text();
                        var XXLicense  = $(this).find('NTLicense').text();
                        var Log  = $(this).find('Log').text();
                        var ExpirationDate  = $(this).find('ExpirationDate').text();
                        $("#resultGenerate").show().append($('<li><span class="ID">' + XXXCustomerID + '</span><span class="XXL">' + XXLicense + '</span><span class="Log">' + Log + '</span><span class="Exp">' + ExpirationDate + '</span></li>'));

                    });
                } else {
                    $('#prcs3').hide();
                    $('input[type="text"], input[type="password"]').val("");
                }
            }
        });
        return false;
    }
});
});

I need to figure out a way to allow it to append only once, or hide the div and populate it again if clicked twice. What i don't want is for user to be able to click button multiple times and it keeps adding the same records. I am trying to hook onto it by checking if it has length, and executing in an if/else statement or possibly using the .one function, but to no avail. I am not able to figure out how to wrap the correct part inside the if/else or how to get the .one funciton to take both a "find" and "each" property.

Answer 1

You should .remove() the same data (using whatever selector is appropriate) at the start of your success handler, to prevent it from being shown twice.

Answer 2

An alternative to Ricardos answer:

$("#Button").live('click',function(){
$("#Form").validate({
submitHandler: function(form) {
    $('#prcs3').show();
    var dataString = $(form).serialize();
    $.ajax({
        type: $(form).attr('method'),
        url: form.action,
        data: dataString,
        clearForm: true,
        success: function(data) {
            var answer = $(data).find("td:eq(3)").text();
            var message = $(data).find("td:eq(5)").html();
            var $xml = $( message );
            if (answer==="True") {
                $('#prcs3').hide();
                $xml.find('license').each(function(){
                    var XXXCustomerID = $(this).find('FXCMCustomerID').text();
                    var XXLicense  = $(this).find('NTLicense').text();
                    var Log  = $(this).find('Log').text();
                    var ExpirationDate  = $(this).find('ExpirationDate').text();
                    $("#resultGenerate").empty();    //Empty the content before placing new stuff in                    
                    $("#resultGenerate").show().append($('<li><span class="ID">' + XXXCustomerID + '</span><span class="XXL">' + XXLicense + '</span><span class="Log">' + Log + '</span><span class="Exp">' + ExpirationDate + '</span></li>'));

                });
            } else {
                $('#prcs3').hide();
                $('input[type="text"], input[type="password"]').val("");
            }
        }
    });
    return false;
}
});
});

Answer 3

Use html instead.

$("#resultGenerate").show().html('...');