Relating dynamic inputs with datalist to other dynamic inputs

Question

I’m new here and I’m curious about programming, so forgive me if I talk nonsense, but I need help.

I have a form with the option to insert inputs dynamically.
Whenever an "item" is added, two inputs, the "foo" and the "bar". All the "foo" relate to the datalist "list".
All the "bar" are inactive and its value must be changed whenever the value of "foo" is amended.

HTML INPUTS:

<div id="lista">
  <div>
    <input name="foo[]" list="dList" type="text">
    <inpu name="bar[]" disabled="" type="text">
  </div>
  <div>
    <input name="foo[]" list="dList" type="text">
    <inpu name="bar[]" disabled="" type="text">
  </div>
</div>
<datalist id="dList">
  <option label="Item 1" datavalue="1" value="Item 1">
  <option label="Item 2" datavalue="2" value="Item 2">
</datalist>

The only way I found to get the inputs (dynamics) was:

input = $('#listaServicos').find(':input'); // array de inputs
// aqui tereis tanto os _"foo"_ quanto os _"bar"_

And then make a for working with them:

valores = [[1,3000],[2,5000],[3,4000],[4,10000],[5,10000]];

for (i = 0; i < input.length; i++) {
  name = input[i].name;
  console.log("name: "+ name);
  if(name.indexOf('foo') > -1){
    // aqui preciso pegar o atributo _"datavalue"_ do datalist 
    // correspondente, comparar com a key array valores
    //e preencher o _"bar"_ com o valor
  }
}

The biggest problem is in relating the "foo" with the datalist, because the "foo" and the "bar" will always be in the same subarray.

Thanks in advance for any help that comes

Answer 1

Following an alternative implementation of what I understood of the problem, there are certainly better ways to implement, the code is well self-explanatory but follows a brief description of what it does: First I put the function .on('input') jquery that is triggered whenever the input is changed, then I take the selected value and look for it in the datalist(dList) through the jquery selector, with the actual value search for the corresponding key in the array of valores[], after simply finding assign the value in the input bar with the jquery siblings.

*Note that the code only works on this array format values, I tried to change as little as possible, any doubts comment there, I hope it helps.

//input = $('#listaServicos').find(':input'); // array de inputs
// aqui tereis tanto os _"foo"_ quanto os _"bar"_

valores = [
  [1, 3000],
  [2, 5000],
  [3, 4000],
  [4, 10000],
  [5, 10000]
];

$('input').on('input', function() {
  var value = $(this).val();
  var chaveSelecionada = $('#dList [value="' + value + '"]').data('value');
  var valorDaChaveNoArray = procuraPorChave(chaveSelecionada);
  $(this).siblings("input").val(valorDaChaveNoArray);

});

function procuraPorChave(id) {
  for (var i = 0; i < valores.length; i++) {
    for (var j = 0; j < 2; j++) {
      if (valores[i][j] == id) {
        return valores[i][j + 1];
      }
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lista">
  <div>
    <input name="foo[]" list="dList" type="text">
    <input name="bar[]" disabled="" type="text">
  </div>
  <div>
    <input name="foo[]" list="dList" type="text">
    <input name="bar[]" disabled="" type="text">
  </div>
</div>
<datalist id="dList">
  <option label="Item 1" data-value="1" value="Item 1">
  <option label="Item 2" data-value="2" value="Item 2">
</datalist>