HTML5/javascriptで表示の切り替えをしたいのですが、find()の使い方がいまいちわかりません。

SpringBoot＋HTML5で勉強中になります。

■HTML５

<section id="testsection" th:each="testinfo, stat:${testInfos}" >
    // stat.indexが0の場合
    <div class="testsection active">①
        <div th:text="${testinfo.ラベル}" >
        <div th:text="${testinfo.データ}" >
    // stat.indexが0でない場合
    <div class="testsection">②
        <div th:text="${testinfo.ラベル}" >
        <div th:text="${testinfo.データ}" >
</section>

このようにしていて、activeの場合にスタイルCSSで「display: block;」となるようにしています。※①が表示されて②は非表示の状態

ここで、あるボタンが押された場合に①を非表示、②を表示にしたいのです。
ボタンのイベント処理をjavascript側
（A）でactiveな①を取得して、
（B）で①をdisplay: noneにし、
（C)ですべての①～②を取得し、
（D）でボタンの番号（changeNo）をINDEXとしたものをdisplay: block;にして
表示させれないかと思うのですが、（B)の後に（C）を取得しても①の分が取得できません。
なにか足りない処理などありますでしょうか。

■javascript

function change(changeNo) {
    // 言語
    var activeInfo = $('#testsection').find('.testsection.active');（A）
    activeInfo.removeClass('active');（B）
    var nonactiveInfo = $('#testsection').find('.testsection');（C）
    $(nonactiveInfo[changeNo]).addClass('active');（D）
}