Bonjour à tous, je suis en train de réaliser un outil de location sur un site de vente. J'ai fais un <select> pour sélectionner un produit, puis un bouton "+" qui duplique cet élément pour ajouter une nouvelle sélection. Je voudrais que quand on change la sélection, un champ apparaisse pour définir la quantité.

Je pensais utiliser ceci :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
document.getElementById('selectId').addEventListener("change", displayQuantity);
Mais le problème c'est que mon bouton "+" duplique aussi l'id du select, donc impossible de faire un événement ciblé sur un seul select

Voici mon code html :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
<div id="choice-tbi-ent">
	<p id="select-tbi-ent"><select>
		<option disabled selected>Sélectionnez un produit</option>
		<option>SMART Board 885 MW521</option>
		<option>SMART Board 885ix2</option>
	</select></p>
</div>
<button id="addTBI-ent" class="ajouter" onclick="duplicateSelect(event);">+</button>

Et le javascript :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
function duplicateSelect(event) {
	var event = event;
	var elem = event.currentTarget;
	if (elem.id == "addTBI-ent") {
		var firstSelect = document.getElementById("select-tbi-ent");
		var newSelect = firstSelect.cloneNode(true);
		document.getElementById('choice-tbi-ent').appendChild(newSelect);
	}
}
Merci d'avance à ceux qui m'aideront à trouver une solution