JavaScript/Jquery : How to support Multiple auto copy value with multiple id

Question

I am using this Jquery:

http://jsfiddle.net/6khr8e2b/

For one set of Jquery, how to support multiple auto input value from A to B with multiple id ?

If using below input:

<input name="A[]" id="foo[]" /> <input name="B[]" id="bar[]" />

Thank you for help & support !

Answer 1

There are multiple ways to fill value in related field if input box is defined as [].

Here is an example which uses index for check related input field:

<input name="A[]" id="foo[]" /><input name="B[]" id="bar[]" /><br />
<input name="A[]" id="foo[]" /><input name="B[]" id="bar[]" /><br />
<input name="A[]" id="foo[]" /><input name="B[]" id="bar[]" /><br />
<input name="A[]" id="foo[]" /><input name="B[]" id="bar[]" /><br />


$(function(){
var $foo = $('input[name="A[]"]');
var $bar = $('input[name="B[]"]');
function onChange(obj) {
var indx = parseInt(obj.index())+1;
   $('input[name="B[]"]').each(function(index) {          
    if($(this).index() == indx){
        $(this).val(obj.val())
    }
});
}
$('input[name="A[]"]')
    .change(function() {
    onChange($(this));
}).keyup(function() {
    onChange($(this));
});
});

You can also use different ways based on page html, You can target/selector "tr" and find other input, use classes and find nearest input or next input. Above example only work if there is only these kind of HTML inputs