セレクトボックスの項目の選択で表示/非表示を切り替えるフォームを1ページに複数設置したい

前提・実現したいこと

＊4/19 タグなどを修正しました
どうぞよろしくお願いいたします。

イメージ説明
添付の図のように、セレクトボックスの選択によって
表示/非表示を切り替えるコンテンツを作りたいです。
(青い部分は未選択、非表示の部分です)

発生している問題

こちらのページを参考に作ってみましたが、1つのフォームにつき1つのスクリプトの場合は
正常に動作しますが、複数設置すると2つ目以降が動作しません。

該当のソースコード

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('[name=hoge1]','[name=hoge2]').addEventListener('change',function(e){
    var t=e.target;
    var v=t.value;
    var p=t.parentNode.parentNode.parentNode;
    Array.prototype.forEach.call(p.querySelectorAll('li[id]'),function(x){
      var dsp='';
      if(x.getAttribute('id')!==v+'-select'){
        dsp='none';
      }
      x.style.display=dsp;
    });
  });
});
</script>

</head>
<body>

<div id="box1">
<select id="changeSelect" name="hoge1">
<option value="">選択肢1</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
<ul>
<li id="option1-select" style="display:none">「選択肢1」option1の表示内容</li>
<li id="option2-select" style="display:none">「選択肢1」option2の表示内容</li>
<li id="option3-select" style="display:none">「選択肢1」option3の表示内容</li>
</ul>
</div>

<div id="box2">
<select id="changeSelect" name="hoge2">
<option value="">選択肢2</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
<option value="option6">option6</option>
</select>
<ul>
<li id="option4-select" style="display:none">「選択肢2」option4の表示内容</li>
<li id="option5-select" style="display:none">「選択肢2」option5の表示内容</li>
<li id="option6-select" style="display:none">「選択肢2」option6の表示内容</li>
</ul>
</div>

</body>
</html>

試したこと

ご回答を受け、表示箇所のidの中身を変更してみましたが
変わらず2つ目のフォームは動作しません。
また前回の質問でベストアンサーに選ばせて頂いたタグを応用できるかと
試してみましたが、動作しませんでした。
以下、応用を試してみたコードです。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<script type="text/javascript">
HTMLElement.prototype.trigger=function(eventStr){
  if (document.createEvent) {
    var e = document.createEvent("HTMLEvents");
    e.initEvent(eventStr, true, true );
    return this.dispatchEvent(e);
  } else {
    var e = document.createEventObject();
    return this.fireEvent("on"+eventStr, e);
  }
};
window.addEventListener('DOMContentLoaded', function(e){
  Array.prototype.forEach.call(document.querySelectorAll('[data-target]'),function(x){
    x.addEventListener('change',function(e){
      Array.prototype.forEach.call(document.querySelectorAll('[name='+e.target.getAttribute("name")+']'),function(y){
        document.querySelector('#'+y.getAttribute('data-target')).style.display=(y.checked?"block":"none");
      });
    });
    x.trigger("change");
  });
});
</script>

</head>
<body>

<div>
<select>
<option value="">選択肢1</option>
<option value="option1" name="r1" data-target="box01">option1</option>
<option value="option2" name="r2" data-target="box02">option2</option>
<option value="option3" name="r3" data-target="box03">option3</option>
</select>
<ul>
<li id="box01">「選択肢1」option1の表示内容</li>
<li id="box02">「選択肢1」option2の表示内容</li>
<li id="box03">「選択肢1」option3の表示内容</li>
</ul>
</div>

</body>
</html>

スクリプトやタグなどは、セレクトボックスを使用する以外の点については
どのように変わっても構いません。
メンテナンスの観点から、できる限りコードは少ない方が嬉しいです。
また、表示/非表示が切り替わったコンテンツの中に同じような
セレクトボックスを作り、入れ込構造のようにできればなお助かります。

引き続き、どうぞよろしくお願いいたします。