javascript .push method inside .each loop only returning one array

Question

Im trying iterate over the checkbox groups and if each group has at least one box checked, I want to add that product information to an array(upperOrder). The problem with my code is that it's only adding the last checked checkbox group (or over writing the previous added group).

Basically I want a multidimensional array with the main array being upperOrder and the sub arrays being each product's information.

Thanks and appreciate anyone's help or if there is a better method to accomplishing this, I would appreciate any suggestions!

html:

<form class="upperCheckboxForm" data-prodid="100" data-prodname="adams" id="group1">
<fieldset data-role="controlgroup">
    <legend>Group 1:</legend>
    <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a" value="one" data-tooth-position="UR1">
    <label for="checkbox-v-2a">One</label>
    <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b" value="two" data-tooth-position="UR2">
    <label for="checkbox-v-2b">Two</label>
    <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c" value="three" data-tooth-position="UR3">
    <label for="checkbox-v-2c">Three</label>
</fieldset>
</form>

<form class="upperCheckboxForm" data-prodid="101" data-prodname="lap" id="group2">
<fieldset data-role="controlgroup">
    <legend>Group 2:</legend>
    <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a" value="four" data-tooth-position="UR4">
    <label for="checkbox-v-2a">Four</label>
    <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b" value="five" data-tooth-position="UR5">
    <label for="checkbox-v-2b">Five</label>
    <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c" value="six" data-tooth-position="UR6">
    <label for="checkbox-v-2c">Six</label>
</fieldset>
</form>

<button id="submitPrintForm">Click</button>

jquery:

$('#submitPrintForm').on('click', function() {

var upperOrder      = [];

$('.upperCheckboxForm').each(function() {

    var $prodName           = $(this).data('prodname'),
        $prodId         = $(this).data('prodid'),
        $prodUrl            = $(this).attr('id'),
        $prodPosition       = [];

    $('#'+ $prodUrl +' input:checked').each(function() {
      $prodPosition.push($(this).data('tooth-position'));
    })

    if($prodPosition.length > 0) {
        upperOrder.push = ([$prodName, $prodId, $prodPosition.length, $prodPosition]);
    }
})
console.log(upperOrder);
});

Answer 1

push is a method. Call it like this:

upperOrder.push([$prodName, $prodId, $prodPosition.length, $prodPosition])

when you are assigning something to upperOrder.push you are actually overwriting the method push, which will make subsequent calls to it fail.

Answer 2

Is this what yyou were lookin for?

$('#submitPrintForm').on('click', function() {

var upperOrder      = [];

$('.upperCheckboxForm').each(function() {

    var $prodName           = $(this).data('prodname'),
        $prodId         = $(this).data('prodid'),
        $prodUrl            = $(this).attr('id'),
        $prodPosition       = [];

    $('input:checked', this).each(function() {
      $prodPosition.push($(this).data('tooth-position'));
    })


    if($prodPosition.length > 0) {
        upperOrder.push($prodName, $prodId, $prodPosition.length, $prodPosition);
    }
})

    console.log(upperOrder);

});