JQuery - Loop through DIVs with the same class and create Array for each of them

Question

I do have many DIVs with the same class .list . They are filled with other divs with the ID element . In these element divs there a checkboxes and textfields. I'm able to get all the checked checkboxes' next Textfield's value. I've saved them into one Array but I want an Array for each .list .

That's how my Code looks so far:

function test(){
 var array = new Array();
    $(".list > #element").each(function(){
    array.push($(this).find('input:checkbox[class=unterpunkte]:checked').next('input[type=textfield]').val());
    });
    console.log(array);
}

How can I dynamcially creat an Array for each list. I don't want to have one Array where all the Values are saved. I need Arrays for each div with class .list . Any ideas?

HTML/PHP:

echo("<div class='list' name='$oberpname' value='$oberpname'>");

        while($satz != null)
        {
            echo("<div id='element'><label><input type='checkbox' class='unterpunkte' name='$satz[unterpname]' value='$satz[unterpid]'><input type='textfield' class='$oberpname' value='$satz[unterpname]' readonly/></label></div>");
            $satz=mysql_fetch_assoc($cursor);
        }

        echo("</div>"); //.list div end

EDIT NOTE: Added HTML/PHP

Answer 1

Note: ID of an element must be unique, so instead of using element as an ID use it as a class.

You can create an array of arrays, and access the desired list of checkboxes using the index of the list element lik

function test() {
    var array = new Array();
    $(".list").each(function () {
        var vals = $(this).find('input:checkbox[class=unterpunkte]:checked').next('input[type=textfield]').map(function () {
            return this.value;
        }).get();
        array.push(vals)
    })
    console.log(array);
}

Now array[0] will give the values for list 1 where as array[1] will give the values for list 2