背景画像を一括で書き換えられるforEach文の書き方

（リファクタリングです）
ボタンクリックでlabel要素の背景画像が一括で変わります。ファイル名参照にデータ属性を使っています。

html

1 <button id="set" data-back="cate1" >1.クリックで3つのlabelそれぞれの背景画像が変わる</button>2 <button id="set" data-back="cate2" >2.クリックで3つのlabelそれぞれの背景画像が変わる</button>3 <div id="wrap">4 <input type="radio" name="pu" id="bo1" data-bo="boxA"><label for="bo1" id="bota1"></label>5 <input type="radio" name="pu" id="bo2" data-bo="boxB"><label for="bo2" id="bota2"></label>6 <input type="radio" name="pu" id="bo3" data-bo="boxC"><label for="bo3" id="bota3"></label>7 </div>

javascript

1window.addEventListener('DOMContentLoaded', function(){2document.addEventListener('click', a=>{3 const cate = a.target;4 if(cate.matches('[data-back]')){//クリックした要素にdata-backがあった場合、5 6 //以下で変えたい背景の数だけ変数を用意し、データ属性の値を取得して、7 var le1 = document.querySelector('#bo1').dataset.bo;8 var le2 = document.querySelector('#bo2').dataset.bo;9 var le3 = document.querySelector('#bo3').dataset.bo;10 //以下の要素の背景を、上記の値を使ってファイル名を参照し書き換える。11 bota1.style.backgroundImage = `url(${cate.dataset.back + le1+".png"})`;12 bota2.style.backgroundImage = `url(${cate.dataset.back + le2+".png"})`;13 bota3.style.backgroundImage = `url(${cate.dataset.back + le3+".png"})`;14};15});16});

このままでもOKなコードですがlabel要素が増えたら対応できないので、もう少し柔軟になるようにjsをリファクタリングしてみたのですが失敗しました。

javascript

1window.addEventListener('DOMContentLoaded', function(){2document.addEventListener('click', a=>{3 const cate = a.target;4 if(cate.matches('[data-back]')){//クリックした要素にdata-backがあった場合、5 6 //ここから以下、リファクタリングしたコードです7 8 var xx1 = cate.dataset.back;//クリックしたボタンのdata-backの値を取ります（ファイル名参照用に使う）9 var xx2 = document.querySelectorAll('[data-bo]');//data-boのデータ属性がある要素を全て取得します（ファイル名参照用に使う）10 var xx3 = document.querySelectorAll('label');//label要素をすべて取得します（この要素の背景画像郡をそれぞれ違うものに一括で変更するのがコードの趣旨です）11 12 //変数xx1とxx2を画像参照のURLとして使い、変数xx3の背景画像郡を一括で書き換えていきます。13 //xx2とxx3は現在NodeListのはず、なのでまず、foreachで繰り返し処理してみます。14 15 xx3.forEach(function(value){ //xx3のlabel要素の背景を順に別画像へ書き換えるので、とりあえずxx3をループの対象にします。16 xx2.forEach(function(value2){ //xx2がnodelistのままなのでループします。17 var vxx2 = value2.dataset.bo;//xx2のデータ属性の値を取得しvxx2とします。18 value.style.backgroundImage = `url(${xx1 + vxx2 +".png"})`;//xx3の背景画像を、xx1と繰り返しで取り出したvxx2を結合させたurlを持つ画像と差し替える。19 });20 21 });22 23}24});25});

結果全部が３番目のlabel要素と同じ背景画像になってしまいました。ループ文や配列は苦手なのですが実際上手く配列処理させるにはどうやってリファクタリングすれば良いでしょうか？