Création de boutons dynamiques dans une boucle for

Bonjour,

Désolé je ne savais pas trop quoi mettre dans le titre.

Je m'explique. Je fait une bar de recherche sans module.

Je capture la saisie avec "keyup" puis je cherche dans ma liste si une occurrence est trouvée.
Une div de résultat me retourne les correspondances.
Je veux pouvoir cliquer sur une de ces correspondances, ce qui remplira mon input et servira de référence pour filtrer ma recherche.

Voici la partie qui me pose problème

Code:

1
2
3
4
5
6
7
8
9
10
 
var choiceNames = document.getElementsByClassName('choice-name')
for(var k=0; k<choiceNames.length; k++) {
  choiceName = document.getElementById(choiceNames[k].getAttribute('id'))
  choiceName.addEventListener('click', function() {
    console.log("id => "+choiceName.getAttribute('id'))
    input.value = choiceName.innerText
    result.innerHTML = null
  })
}

Lorsque je clique sur un des boutons générés par javascript le script prends le dernier bouton en référence.
Je devine que c'est à cause du addEventListener qui ce trouve dans une boucle Mais je ne vois pas comment faire.

Si besoin voici le code complet

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<?php
$names = [
  "HABER", "GROUX", "JUMEAU", "COGNEAU", "COGNEAU", "LE", "BEAU", "GIROUARD",
  "POLLUCHE", "LEBEAU", "ROULLIER", "MARAIS", "SINSONNES", "MARTIN", "ROSSE",
  "SÉGRÉTAIN", "HUET", "SINSONNET", "MARTIN", "GAGER", "LAMBERT", "MENEAU", "COUILLIN",
  "LAMBERT", "TUFFÉ", "CLEREAU", "CHAUVEAU", "PAUTONNIÉ", "LEBEAU", "COGNEAU",
  "SÉGRÉTAIN", "BURON", "ESNAULT", "HABER", "VEDYE", "HUBERSON", "MARTIN", "DE", "TOUCHE",
  "DUCOEURJOLLY", "CRÉPEAU", "PERSON", "MARAIS", "JAMET", "JAMET", "HUBERSON", "BULLOU", "POUCE",
  "BULLOU", "PRÉVILLE", "PRÉVILLE", "PRÉVILLE", "PRÉVILLE", "BULLOU", "PAUCÉ", "PRÉVILLE",
  "DALPOT", "RENONCET", "PRÉVILLE", "DALPOT", "RENONCET", "MENOU", "MENOU", "MERCIER",
  "GESLAIN", "JACQUAI", "GESLAIN", "JOUI", "PIPEREAU", "HUET", "HABER", "JACQUET",
  "FERAUD", "SOUCHAY", "MERCIER", "MENOU", "JOUIN", "PIPEREAU", "HOUDÉE", "ISAMBERT","RICHER"
]
?>
 
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input type="text" id="input" name="" value="">
    <input type="hidden" id="list" name="" value="<?php foreach($names as $name){echo $name.' ';} ?>">
    <div class="" id="result"></div>
  </body>
</html>
<script type="text/javascript">
var list = document.getElementById('list').value.split(' ')
var input = document.getElementById('input')
var result = document.getElementById('result')
 
input.addEventListener('keyup', function() {
  var inputValue = input.value
  result.innerHTML = null
  for(var j=0; j<list.length; j++) {
    if(list[j].toLowerCase().indexOf(inputValue.toLowerCase()) != -1) {
      if(result) {
        resultValue = result.innerText.split('\n')
        if(!resultValue.includes(list[j])) {
          var name = document.createElement('button')
          name.setAttribute('class', 'choice-name')
          name.setAttribute('id', list[j])
          name.innerText += list[j]
          result.appendChild(name)
        }
      }
    }
  }
  if(inputValue == '') {
    result.innerHTML = null
  }
  var choiceNames = document.getElementsByClassName('choice-name')
  for(var k=0; k<choiceNames.length; k++) {
    choiceName = document.getElementById(choiceNames[k].getAttribute('id'))
    choiceName.addEventListener('click', function() {
      console.log("id => "+choiceName.getAttribute('id'))
      input.value = choiceName.innerText
      result.innerHTML = null
    })
  }
})
 
</script>
 
<style media="screen">
#result {
  position: absolute;
  display: flex;
  flex-direction: column;
  background-color: rgba(100,120,100,1);
}
.choice-name {
  border: 1px solid red;
  border: none;
  background-color: rgba(0,0,0,0);
  cursor: pointer;
  color: white;
}.choice-name:hover {
  background-color: rgba(0,0,0,0.5);
}
</style>