Populating form fields with comma seperated strings in unordered list onclick with jQuery/Javascript

Question

Hi,

I have an address lookup system which returns addresses in an unordered list like so:

<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>

When someone clicks on an li containing the address i use the folloqing jQuery to split it and populate the following form fields.

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');

});

Form fields:

<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>

However it only seems to populate the first line of the address and not lines two and three.

I could easily do this manually but i wanted to abstract it so that it could be expanded to cater for any amounts of address lines.

Answer 1

For some reason it doesn't like this line:

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

When i change to this:

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

It works fine :)