Populate multiple fields with autocomplete and same id

Question

I'm having a tough time resolving this issue !

Basically, I have this type of form :

<div class="row loop">
        <label class="input"> 
            <input type="text" name="ajax1" id="_ajax1[]" class="ajax1">
        </label>
        <label class="input">
             <input type="text" name="ajax2" id="_ajax2[]" class="ajax2">
        </label>
</div>

<div class="row loop">
        <label class="input"> 
            <input type="text" name="ajax1" id="_ajax1[]" class="ajax1">
        </label>
        <label class="input">
             <input type="text" name="ajax2" id="_ajax2[]" class="ajax2">
        </label>
</div>

Each div counts as a line in my form, I have more than 10 divs like this in it.

I am autocompleting the 1st "ajax1" input without a problem, with an each. Now, what I want is to change the value of the "ajax2" input, following what the user chose for the autocomplete of the "ajax1" field. The problem here is that when I change the "ajax2" value, it changes the "ajax2" values of ALL the divs.

What I really want is, for each div, to autocomplete the "ajax1" value, and then to populate "ajax2" following what was selected.

As I am adding divs dynamically, I can't make the IDs unique..

Thanks a lot !

Answer 1

Assuming there is an event handler on autocomplete, you can use a closest/find pair to get the element you want. A simple example inside the handler function will look like:

$(this).closest('.row').find('.ajax2').val('NEW VALUE');

You start from the base element (with the autocomplete function attached), go up to the wrapper div then find the wanted element.

Note that this is only a trick to find the element inside the given structure, you should try to find a way to generate unique IDs and identify the elements based on them.