根据表单页面显示不同的div内容

Question

我试图根据用户在Rsform pro多页面表单上的页面来更改div内容。 div不在形式之内。

表单为4页，默认情况下为div id＆＃34; bs01＆＃34;在页面加载时显示，我已设法使用此基本js代码显示/隐藏按钮点击的div

CSS

#bs02 {display: none;}
#bs03 {display: none;}
#bs04 {display: none;}

JS

$(document).ready(function() {
  $("#getaquoteNext").click(function() {
    $("#bs01, #bs03, #bs04").hide();
    $("#bs02").show();
  });
  $("#p2Next").click(function() {
    $("#bs01, #bs02, #bs04").hide();
    $("#bs03").show();
  });
  $("#p3Next").click(function() {
    $("#bs01, #bs02, #bs03").hide();
    $("#bs04").show();
  });
});

主页HTML

    <div class="row">
    <div class="col-xs-12 col-md-4">
    <div id="bs01">Default content</div>
    <div id="bs02">page 2 content</div>
    <div id="bs03">page 3 content</div>
    <div id="bs04">page 4 content</div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-8">
    <div>BOOKING FORM<br>
  <button id="getaquoteNext"><a href="#">Get a quote</a></button>
  <button id="p2Next"><a href="#">calander</a></button>
  <button id="p3Next"><a href="#">details</a></button>
</div>
    </div>
    </div>

在页面上，当用户输入他们的详细信息并点击获取报价按钮（按钮ID =＆＃34; getaquoteNext＆＃34;）div id =＆＃34; bs02＆＃34;应该在第2页上显示，依此类推。