jquery - 編集時のjQueryは、最初のdivをli内の2番目のdivに動的に切り替えます

Question

私はいくつかの問題を抱えています。「インプレース編集」の実装に取り​​組んでおり、1 つの li 内の 2 つの div について動的に ID を取得したいと考えています。最初の div はデフォルトで表示され、2 番目は display: none; に設定されています。ペンの「アイコン」（スパン）をクリックすると、切り替えたい、つまり最初のdivを設定します：display：none; 2 番目の表示: ブロック; これはこれまでの私のjQueryです：

$('.edit-tools').each(function () {
             var pen = this;
             $(pen).click(function () {
                 var div_id_first = $(this).closest(".school").attr('id');
                 var div_id_second = $(".school-edit").attr('id');

                 console.log(div_id_first);
                 console.log(div_id_second);

                 $('#' + div_id_first).css("display", "none");
                 $('#' + div_id_second).css("display", "block");

                 $('.edit-tools').attr("disabled", true); 
             });
         });

編集: 問題は 2 番目の ID にあります。これは、他の div が外側にあり、ペン (スパン) が最初の div 内にあるためです。メソッドが動作します。

主な質問は、どうすれば 2 番目の ID を取得できるかということです。

 <li>
    <div id="09990-view"></div>
    <div id="09990-edit" style="display: none;"></div>
 <li>

これがjsfiddleです：http://jsfiddle.net/tF6nD/3/