jquery で　複数の別々のテキストをクリックしてテキスト内容を個別に変更＋ループ


初めまして。 jquery 初心者です。  
下記の参考サイトのような機能を実装したく、いろいろとwebで調べましたが、答えにたどり着けず困っております。 どなたか教えていただけると嬉しいです。

やりたいことというのは、下記のURLの通りなんですが、一点問題が発生しました。

※参考サイト（サンプル画面）  
<http://www.iltt.info/page/information/contents/20091105_sample.htm>

※参考サイト（説明ページ）  
<http://www.iltt.info/page/information/contents/20091105.htm>

問題というのは、たとえば、 生徒の一覧画面にAさん、Bさん、Cさん、Dさん と並べて
各それぞれの人に対してボタン配置させた場合、上記のURLのままやると全員のテキストが同時に入れ変わってしまいます。

これを各自別々に作動するように分けたいのですが、いくら調べてもわかりませんでした。

同じクラスが指定されているので、全部一緒に入れ替わるという理屈は分かるのですが、別々にする作動する記述がどうしても分からないままです。

別々のclassやidに別けてで生徒の人数分のjsを書けば良いじゃないか！と言われるかと思いますが、それだと、人数が増えた文記述数も増えていくので、ほかに良い方法があるのではと思っています。

どなたかご教授いただけると助かります。

よろしくお願いします。

追記＝＝＝＝＝＝＝  
一点追記になります。  
変更したいテキストというのは、住所、電話番号などの各自それぞれ別々データになります。

[例]

田中太郎君  
クリック→ [東京都渋谷区]→[03-1111-1111]→ループ

吉岡二郎君  
クリック→ [神奈川県横浜市]→[043-111-1111]→ループ

というようなイメージです

現状のコード＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

上記の参考URLを参考にしております。

[code]

    山田太郎    
    <div style="border: solid 1px #ccc">
        <div class="cm1">
            <p class="change "> 【契約住所】〒150-0002　東京都渋谷区渋谷</p>
        </div>
        <div class="cm2">
            <p class="change ">【電話番号】03-xxxx-1111</p>
        </div>
    </div>
    
    吉岡二郎
    <div style="border: solid 1px #ccc">
        <div class="cm1">
            <p class="change ">【契約住所】〒150-0052　東京都渋谷区元代々木町</p>
        </div>
        <div class="cm2">
            <p class="change ">【電話番号】03-xxxx-2222</p>
        </div>
    </div>
    
[/code]

下記がスクリプトになります。

[code]

    <script type="text/javascript">
        $(function () {
            $(".change").click(function () {
                for (i = 1; i < 3; i++) {
                    if (i == 2) {
                        j = 1;
                    } else {
                        j = i + 1;
                    }
                    if ($(".cm" + i).css("display") != "none") {
                        $(".cm" + i).hide();
                        $(".cm" + j).show();
                        break;
                    }
                }
            });
        });
    </script>
    
[/code]




こういうこと？

[code]

    $(function () {
            $(".change").click(function (e) {
             //現在の要素を非表示
             $(e.target).parent().hide();
             //現在の要素を末尾に移動
             $(e.target).parent().parent().append($(e.target).parent());
             //先頭の要素を表示
             $(e.target).parent().parent().children("div:eq(0)").show();
            });
        });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    山田太郎 
    <div style="border: solid 1px #ccc">
        <div>
            <p class="change"> 【契約住所】〒150-0002　東京都渋谷区渋谷</p>
        </div>
        <div style="display:none">
            <p class="change">【電話番号】03-xxxx-1111</p>
        </div>
    </div>
    
    吉岡二郎
    <div style="border: solid 1px #ccc">
        <div>
            <p class="change">【契約住所】〒150-0052　東京都渋谷区元代々木町</p>
        </div>
        <div style="display:none">
            <p class="change">【電話番号】03-xxxx-2222</p>
        </div>
    </div>
[/code]

