Заполнение полей формы разделенными запятыми строками в неупорядоченном списке по щелчку с помощью jQuery / Javascript

Question

У меня есть система поиска адресов, которая возвращает адреса в неупорядоченном списке следующим образом:

<p>Please select your address from the list below</p>
<div id="selectAddress">
    <ul>
        <li>HNO 412,addressLine2,addressLine8</li>
        <li>HNO 413,addressLine2,addressLine8</li>
        <li>HNO 414,addressLine2,addressLine8</li>
    </ul>
</div>

Когда кто-то нажимает на li, содержащий адрес, я использую следующий jQuery, чтобы разделить его и заполнить следующие поля формы.

var $customerAddress = $("form#detailsForm input[name*='customerAddress']");

    $("div#selectAddress ul li").click(function(){

    $(this).removeClass("addressHover");

    $("li.addressClick").removeClass("addressClick");

    $(this).addClass("addressClick");

    var $splitAddress = $(this).text().split(",");

    $($customerAddress).closest("tr").removeClass("hide");

    $($customerAddress).each(function(){
        var $inputCount = $(this).index($customerAddress);  
        $(this).val($splitAddress[$inputCount]);
    });     

    $.cookies.set('cpqbAddressInputs', 'visible');

});

Поля формы:

<tr>                    
<th>
    <label for="customerAddressLine1">Address&nbsp;*</label>
</th>   
<td colspan="3">
    <input type="text" name="customerAddressLine1" maxlength="40" value="" id="customerAddressLine1" class="text" />
</td>   

<tr>
    <th>
        <label for="customerAddressLine2" class="offscreen">Address line 2</label> 
    </th>
    <td colspan="3">
        <input type="text" name="customerAddressLine2" maxlength="40" value="" id="customerAddressLine2" class="text" />
    </td>
</tr>
<tr>
    <th>
        <label for="customerAddressLine3" class="offscreen">Address line 3</label> 
    </th>
    <td colspan="3">
        <input type="text" name="customerAddressLine3" maxlength="40" value="" id="customerAddressLine3" class="text" />
    </td>
</tr>

Однако кажется, что он заполняет только первую строку адреса, а не строки два и три.

Я мог бы легко сделать это вручную, но я хотел абстрагировать его, чтобы его можно было расширить для обслуживания любого количества адресных строк.

Answer 1

По какой-то причине ей не нравится эта строка:

var $inputCount = $(this).index($customerAddress);

Когда я перехожу на это:

var $inputCount = $(this).index("form#detailsForm input[name*='customerAddress']");

Работает нормально :) 1007 *