Finding div(s) inside of a div in jQuery

Question

My fiddle does not work like it does on my machine locally. I can actually drag the elements. Nevertheless, it can work as a visual for what I am trying to acheive.

I can already drag and drop the units to the divs below the pool but I want to be able to save their location. To be more specific: I want to send an ajax request back to a php file with the location of the units , the container it was dragged into so I can save it my categories table I have in a database so when the page is loaded back it will load the units in their respected categories which I am referring to as containers .

I just do not know how to get the data I want. Here is a rough pseudo code of what I am attempting

---

var array_for_container1[]; //to hold the units in the first container
var array_for_container2[]; //to do the same
//etc
//loop through each container and get the units inside
//place each unit into the array it needs to be in
//send to php with ajax request

---

Now I am creating the containers dynamically so I will have to somehow have an array to hold the units for each of them. Basically I'll have to find out how many containers there are so I can get a number of arrays to create and the number of containers to loop through. If anyone has suggestions on how to do that I would greatly appreciate it, however, that isn't the goal of this post. My goal in this post is to know what units are in which containers

Answer 1

Well, with this FIDDLE , I've simplified your code just down to the html.

Then I've written a little script that goes through all of the labels, counts them and puts their html contents into an array.

The number of labels and the array are then printed out into two test divs.

Here is the js:

var counter = 0;
var contentarray = new Array();
$('label').each(function(index){
    contentarray[counter] = $(this).html();
    counter = counter +1;
});

$('.output1').html(counter);
$('.output2').html(contentarray);

Seems to work.