javascript - 選択した div をクリックして入力を埋める

Question

選択した div をクリックしてフォームに入力しようとしています。各 div には異なる情報があります。

私のdiv -

<div class="ab">
<ul>
    <li data-key="name">Sahar Raj</li>
    <li data-key="address">Address.</li>
    <li data-key="city">City</li>
    <li data-key="state">State</li>
    <li data-key="pin">Pin</li>
    <li data-key="phone">9876543210</li>
</ul>
</div>

<div class="ab">
<ul>
    <li data-key="name">Some Name2</li>
    <li data-key="address">Address2</li>
    <li data-key="city">City3</li>
    <li data-key="state">State4</li>
    <li data-key="pin">Pin5</li>
    <li data-key="phone">Phone2</li>
</ul>
</div>

<div class="ab">
<ul>
    <li data-key="name">Some Name3</li>
    <li data-key="address">Address3</li>
    <li data-key="city">City3</li>
    <li data-key="state">State3</li>
    <li data-key="pin">Pin3</li>
    <li data-key="phone">Phone3</li>
</ul>
</div>

形 -

<div class="formcontainer">
<input class="required" type="text" name="name" />
<textarea name="address" class="required"></textarea>
<input class="required" type="text" name="city" />
<input class="required" type="text" name="state" />
<input class="required" type="text" name="pin" />
<input class="required" type="text" name="phone" />
</div>

脚本 -

$('div.ab').click(function () {
    $('.formcontainer').children().each(function() {
         // Get the corresponding key value from li.
         var $this =  $(this),
             key = $this.attr('name');
         // Find the li with that key
        var txt = $('.ab li[data-key="'+ key +'"]').text();

        $this.val(txt);
    });
});

最初はこのくらいにしてみました。情報が異なる 3 つの div があります。しかし、フォームは 3 つの div すべてのコンテンツで満たされています。次に、このスクリプトを追加して、ホバーするとクラスclixがdivに追加されるようにしました-

$("#clikadd").hover(function() {
$(this).addClass("clix");
}, function() {
    $(this).removeClass("clix");
});

すべての div に IDを追加clickaddし、前のスクリプトのクラスを から に変更しましdiv.abたdiv.clix。動いていない。何か案が？