HTML Datalist value beside the option

Question

I have two data list in the below snippet and the values of the selected option should be shown beside them.

My First(Account) one is working properly, but second(Head) one is not working. The value is not getting selected for Head.

/*List function starts*/

document.querySelector('input[list]').addEventListener('input', function(e) {
  var input = e.target,
    list = input.getAttribute('list'),
    options = document.querySelectorAll('#' + list + ' option'),
    hiddenInput = document.getElementById(input.getAttribute('id') + '-hidden'),
    inputValue = input.value;

  hiddenInput.value = inputValue;

  for (var i = 0; i < options.length; i++) {
    var option = options[i];

    if (option.innerText === inputValue) {
      hiddenInput.value = option.getAttribute('data-value');
      break;
    }
  }
});

/*List function ends*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="accntid">Account: </label>

<input id="accntid" name="taccntlist" list="accnt_list" value="" placeholder="Account" required />
<datalist id="accnt_list">

    
    <option data-value="001">Dummy1</option>
        
    <option data-value="0000000">Dummy</option>
    </datalist>
<input type="text" name="txtaccnt" id="accntid-hidden" readonly>
<br /><br /><br />



<label for="headid">Head: </label>

<input id="headid" name="txtheadlist" list="head_list" value="" placeholder="Head" required />
<datalist id="head_list">

    
    <option data-value="1">d1</option>
        
    <option data-value="0000000000">dummy</option>
    </datalist>
<input type="text" name="txthead" id="headid-hidden" readonly>
<br /><br /><br />

Answer 1

I changed your js code, and added method forEach(), having previously declared the call to the inputs like this:

let inputs = document.querySelectorAll('input[list]');

This means that e.target is no longer necessary to use.

let inputs = document.querySelectorAll('input[list]');

inputs.forEach(function(current, index) {
  current.addEventListener('input', function() {
      list = current.getAttribute('list'),
      options = document.querySelectorAll('#' + list + ' option'),
      hiddenInput = document.getElementById(current.getAttribute('id') + '-hidden'),
      inputValue = current.value;

      hiddenInput.value = inputValue;

      for (var i = 0; i < options.length; i++) {
        var option = options[i];

        if (option.innerText === inputValue) {
           hiddenInput.value = option.getAttribute('data-value');
           break;
        }
      }  
  });  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="accntid">Account: </label>

<input id="accntid" name="taccntlist" list="accnt_list" value="" placeholder="Account" required />
<datalist id="accnt_list">

    
    <option data-value="001">Dummy1</option>
        
    <option data-value="0000000">Dummy</option>
    </datalist>
<input type="text" name="txtaccnt" id="accntid-hidden" readonly>
<br /><br /><br />



<label for="headid">Head: </label>

<input id="headid" name="txtheadlist" list="head_list" value="" placeholder="Head" required />
<datalist id="head_list">

    
    <option data-value="1">d1</option>
        
    <option data-value="0000000000">dummy</option>
    </datalist>
<input type="text" name="txthead" id="headid-hidden" readonly>
<br /><br /><br />