Auto Complete twice

How can I make this code work twice on a single page?

“`
<p>
<input list=”suggestionList” id=”answerInput”>
<datalist id=”suggestionList”>
<?php
# https://stackoverflow.com/questions/29882361/show-datalist-labels-but-submit-the-actual-value
include “../scripts/getCities.php”;
$d = json_decode($JSON, true);
foreach ($d as $f){
echo “<option data-value=”” . $f[‘CityID’] .””>” . $f[‘City’] . “, [” . $f[‘ISO_Country’] . “]</option>”;
}
?>
</datalist>
<input type=”text” name=”answer” id=”answerInput-hidden”>
</p>

<script>
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;
}
}
});
</script>

<p>
<input list=”suggestionList2″ id=”answerInput2″>
<datalist id=”suggestionList2″>
<?php
foreach ($d as $f){
echo “<option data-value=”” . $f[‘CityID’] .””>” . $f[‘City’] . “, [” . $f[‘ISO_Country’] . “]</option>”;
}
?>
</datalist>
<input type=”text” name=”answer” id=”answerInput-hidden2″>
</p>

<script>

document.querySelector(“#answerInput2”).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;
}
}
});
</script>
“`

Also in #JavaScript _↴