Getting a button to target a particular set of items

Getting a button to target a particular set of items

Hello.

I'm (trying) to build a simple flashcard page. The HTML is currently hardcoded with unique IDs.

Using the following jquery with for loops I can successfully flip the individual cards, but the code I've written for the 'Toggle all items per section' button targets all the sections no matter which button I click. I've been struggling with this for a stupid amount of time and wonder if any one could point out my error.

JS
(function($) {


// Toggle all items per section (THIS DOESN'T WORK)
for (k = 0; k < 10; k++){
$("#toggle"+k+"All").click(function(){
for (l = 0; l < 10; l++){
$("#togglebox"+l+"Container .langbox").toggleClass("hide");
}
});
}

// Toggle individual items per section (THIS WORKS)
for(i=0;i<10;i++){
for(j=0;j<20;j++){

$("#togglebox"+ i +"-"+ j).click(function(){
$(this).find(".langbox").toggleClass("hide");
});
}
}

})( jQuery );

HTML
<div id="togglebox0Container">
<p>Click an item to toggle it or <button id="toggle0All">Toggle All</button></p>

<div class="togglebox" id="togglebox0-0">

<p class="langbox">
Flash card 0 Side A
</p>

<p class="hide langbox">
Flash card 0 Side B
</p>

</div>

<div class="togglebox" id="togglebox0-1">

<p class="langbox">
Flash card 1 Side A
</p>

<p class="hide langbox">
Flash card 1 Side B
</p>

</div>
</div>

<div id="togglebox1Container">
<p>Click an item to toggle it or <button id="toggle1All">Toggle All</button></p>

<div class="togglebox" id="togglebox1-0">

<p class="langbox">
Flash card 0 Side A
</p>

<p class="hide langbox">
Flash card 0 Side B
</p>

</div>

<div class="togglebox" id="togglebox1-1">

<p class="langbox">
Flash card 1 Side A
</p>

<p class="hide langbox">
Flash card 1 Side B
</p>

</div>
</div>

HTML continues 'togglebox2Container' etc...

If more information required please let me know!

Happy New Year,
Chris