Adding divs on the fly with jQuery and submit them through AJAX

I'm having some blocking issues with something I'm developing.

The idea is to have customers who may have more than one address. So, when you see the customer "profile" you have a Select box which have all his/her addresses tagged so you only see the one which is selected.

They are really there but hidden with some javascript/jquery.

So, the problem comes when adding new address. I don't know how could I add more dinamically. What I do is to have a hidden div which is empty so, when you press the Add address button it shows the div and let you fill the form however I don't know how to add more than one and then save them.

The issue is with usability and with programming. The usability part is that you may have visible the div with the Address you are about to add but what happens with that div if you try to add a new one? Should be hidden? If so, there should be a way to get them back just in case you need to change some data or if you don't hide them, you may end with a really big scroll bar.

And开发者_如何学Go then, there is the way I save the info for each address div, I'll paste my code here:

$('.form-direcciones').each(function(){
    var ajData = $(this).serialize();
    var idDireccion = $(this).attr('id');
    if (idDireccion === 'form-nueva-direccion'){
        ajData = ajData + '&action=insertar'+
                '&cod_cliente='+cod_cliente;
    }
    else{
        idDireccion = idDireccion.split('-');
        ajData = ajData + '&cod_dir='+idDireccion[2] +
            '&action=' + action +
            '&cod_cliente=' + cod_cliente;
    }

    $.ajax({
        type: "POST",
        url: "controllers/direccion.php",
        async: false,
        data: ajData,
        dataType: "html",
        cache: false
    });
});

As you may see, it checks if the ID of the div is the one I use for that but even with that solutions it seems a little bit dirty to me.

Also, it comes the problem where I'm having repeated IDs...

Just take a look at this jsfiddle

http://jsfiddle.net/Z3JPW/12/

I have done the basics to give you an idea on how to do stuff client side. You can do everything such as editing and deleting and inserting all at client side and finally take the data to the server side persistence.