SOLVED: I replaced this line:

audienceGroups.push(oneAudienceGroup);

with this line:

audience_groups.push(JSON.parse(JSON.stringify(one_audience_group)));

Works great now.

////////////////////////////////////

EDIT: Here's the actual code

This is the page I'm having trouble with. I'm using javascript and the DOM. The three niches (Productivity, Marketing, Sales) and the social media audiences are chosen by the user on previous pages and stored in arrays. I insert their choices into the DOM to create this page. (Ignore the word "undefined," it's not relevant to my current issue.) The group of audiences chosen is always repeated under whatever niches are chosen. The user chooses from long lists of niches and audiences, so I don't know ahead of time how many or which niches or audiences there will be.

When they see this page, nothing is checked. They decide which audiences to check under the niches.

I need to store the checked audiences under each niche in its own array (oneAudienceGroup), and push those arrays onto a larger array (audienceGroups). So based on the image, I need these three arrays:

Facebook, Instagram
Facebook, Instagram, LinkedIn, TikTok 
YouTube

and push them onto a larger array. And then I need to be able to retrieve the lists in the separate arrays. The problem is when I look inside audienceGroups, it seems to contain three references to the last verson of oneAudienceGroup. So it contains YouTube, YouTube, YouTube.

My question is: how do I make a copy of oneAudienceGroup to push onto audienceGroups?

Here's the structure of the HTML:

<ul id="matching_niches_audiences">
<li>
	<b>[NICHE]</b><br>
	<b>[undefined]</b>
	<li>
		<input type="checkbox">
		[AUDIENCE]
	</li>
	<li>
		<input type="checkbox">
		[AUDIENCE]
	</li>
	<li>
		<input type="checkbox">
		[AUDIENCE]
	</li>
</li>
<br>
<li>
	<b>[NICHE]</b><br>
	<b>[undefined]</b>
	<li>
		<input type="checkbox">
		[AUDIENCE]
	</li>
	<li>
		<input type="checkbox">
		[AUDIENCE]
	</li>
	<li>
		<input type="checkbox">
		[AUDIENCE]
	</li>
</li>
<br>
<li>
	<b>[NICHE]</b><br>
	<b>[undefined]</b>
	<li>
		<input type="checkbox">
		[AUDIENCE]
	</li>
	<li>
		<input type="checkbox">
		[AUDIENCE]
	</li>
	<li>
		<input type="checkbox">
		[AUDIENCE]
	</li>
</li>
</ul>

Here's the javascript. I marked the problem line with asterisks. I've included what's getting logged to the console. Everything seems to be fine in the code except how to copy an array to the larger array:

const audienceGroups = [];
const oneAudienceGroup = [];
let nicheLi;
let audienceLis;
const allNicheLis = document.querySelector('#matching_niches_audiences').childNodes; 
    console.log(allNicheLis.length); // 3    number of niches
    
    for (let w = 0; w < allNicheLis.length; w++)
    {
        nicheLi = allNicheLis[w];
        audienceLis = nicheLi.getElementsByTagName('li');
        console.log(audienceLis.length); // 3 iterations: 5, 5, 5  the number of audiences displayed under each niche
        oneAudienceGroup.length = 0; 
        for (b = 0; b < audienceLis.length; b++)
        { 
            if (audienceLis[b].getElementsByTagName('input')[0].checked)
            {
                oneAudienceGroup.push(audienceLis[b].textContent);
            }
        }
        // This output is correct, group 1: Facebook Instagram,  group 2: Facebook Instagram LinkedIn TikTok, group 3: YouTube
        for (let j = 0; j < oneAudienceGroup.length; j++){console.log(oneAudienceGroup[j]);
        }
        // *** This line is the problem. I need to push a *** 
        // *** copy of oneAudienceGroup, not a reference. ***
        audienceGroups.push(oneAudienceGroup);
    }

This is the code I used to check the contents of the larger array. It contains YouTube, YouTube, YouTube.

console.log(audienceGroups.length); // 3
for (let f = 0; f < audienceGroups.length; f++)
{
    console.log(audienceGroups[f].length); //  1, 1, 1 All three arrays have only one element.
    for (let g = 0; g < audienceGroups[f].length; g++)
    {
        console.log(audienceGroups[f][g]); // YouTube, YouTube, YouTube --- The audiences for the first two niches weren't stored.
    }
}

Thanks in advance for any help or suggestions.

/////////////////////////////////////////////////////////////////////////

original post

////////////////////////////////////////////////////////////////////////

In my app I'm using two nested loops to create an array of arrays. The inner loop creates short arrays and pushes them onto the larger array. I never know how many iterations each loop will do. I need a way to copy the shorter array to the larger array. What I'm doing below seems to be using a reference, even though I'm using new Array(). How do I make a copy of the shorter array and add it to the larger array?

This code isn't working because when I push temp_array onto array_of_arrays, array_of_arrays ends up filled with references to the latest value of temp_array. I don't understand why new Array() doesn't fix the problem.

var temp_array = [];
var array_of_arrays = [];
temp_array.push(1); // push() happens in a loop. Number of iterations is unpredictable.
temp_array.push(2);
array_of_arrays.push(new Array(temp_array));
temp_array.length = 0;
temp_array.push(3);
temp_array.push(4);
temp_array.push(5);
temp_array.push(6);
array_of_arrays.push(new Array(temp_array));
temp_array.length = 0;
temp_array.push(7);
array_of_arrays.push(new Array(temp_array));
console.log(array_of_arrays.length); // 3
console.log(array_of_arrays[0].length); // 1
console.log(array_of_arrays[1].length); // 1
console.log(array_of_arrays[2].length); // 1
console.log(array_of_arrays[0][0]); // 7
console.log(array_of_arrays[1][0]); // 7
console.log(array_of_arrays[2][0]); // 7