Javascript中的蝴蝶效应类型的函数

Question

http://imgur.com/P2rJRGz这是一张图片，解释了我想要实现的目标。我想让按钮允许用户按下另一组按钮，这些按钮可以打开另一组按钮，所有这些按钮都会根据您按下的按钮替换div的背景图像。我真的对如何实现这一点感到茫然，我不擅长编程功能。

下面的代码使用户可以一次三个滚动9张图片，但这不是我想要实现的。

    <div id="container">
    <div class="adventure">
        <div class="picture"></div>
        <div class="describingtext">
        <p></p>
        </div>
        <div id="choice">
         <div id="choiceABC" class="group active">
             <button id="Image1" class="button">A</button>
             <button id="Image2" class="button">B</button>
             <button id="Image3" class="button">C</button>
          </div>
          <div id="choiceDEF" class="group">
            <button id="Image4" class="button">D</button>
            <button id="Image5" class="button">E</button>
            <button id="Image6" class="button">F</button>
          </div>
          <div id="choiceGHI" class="group">
            <button id="Image7" class="button">G</button>
            <button id="Image8" class="button">H</button>
            <button id="Image9" class="button">I</button>
          </div>
        </div>
         <button id="switch">Next Page</button>
    </div>
</div>

$('.button').click(function() {
 var btn = $(this).attr('id');
 var img = "https://placehold.it/600x338?text=" + btn;
 $('.picture').css('background-image',
'url(' + img + ')'
 );
 });

$('#switch').click(function() {
  var act = $('.group.active');
  var next = act.next();
  act.removeClass('active');
  next.addClass('active');
  if (act.attr('id') == "choiceGHI") {
     $('#choiceABC').addClass('active');
  }
});