How can I grab data from more than one droppable element - php

Question

In my script I'm experimenting with jquery draggable & droppable, See here. I'm trying to grab the data (to eventually put in a database) from each draggable element that's dropped into the droppable div. Right now I have it so that I can only get the data from the div the was last dropped.
$('#sortcard, #dropbox, #dropbox1').droppable({
accept: '.sorting',
hoverClass: 'border',
tolerance: 'touch',
drop: function(e, ui) {
$(this).append(ui.draggable.html() + '<br/>');
$("#add_friend").show().fadeOut(12000);
$(e.target).droppable("disable");
$(e.target).append("<input type='button' name='Sub' value='clear'/>").click(function() {
$(this).empty().droppable("enable");
});
var dropbox = $('#dropbox').html();
var dropbox1 = $('#dropbox1').html();
if(dropbox && dropbox1 !== '') {
$.post("account_main.php", {data: $(this).text()}, function(data) {
$('#demo').html(data);
});
}
}
});
I'm thinking the culprit may be
{data: $(this).text()}, function(data) {
$('#demo').html(data);
});
I have toyed with it and still not getting the results I desire. I feel maybe my coding on this is sketchy and needs a makeover, but I just need some ideas to push me in the right direction to make it efficient and would be very appreciative as well of any tips.

Answer 1

You're only getting the data from the last droppable because your sending $(this).text().
In that context $(this) is the last droppable that was dropped. Since you want more than that, you'll want to replace:
{data: $(this).text()}
with something like:
{
sortcard: $('div#sortcard').text(),
dropbox: $('div#dropbox').text(),
dropbox1: $('div#dropbox1').text()
}
Which will send the data from those three DIVs.