JSFiddle - React, Tailwind, and code Playground

by kewan888

HTML

<?php
include("/var/www/connexion_bdd.php");
?>
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		<div id="pieces">
			<div id="piece1">
				Pièce 1 <?php include("/var/www/compte_rendu/liste_piece.php");?>
				Prix <input type="number" name="prix1" id="prix1" />
				Quantité <input type="number" name="quantite1" id="quantite1" />
			</div>
		</div>
		<div id="ajouterPiece">
			<input type="button" name="buttonAjouterPiece" id="buttonAjouterPiece" value="Rajouter une pièce" onClick="ajouterPiece(1)" />
		</div>
			<script type="text/javascript" src="/test2.js"></script>
	</body>
</html>

JavaScript

function ajouterPiece(numPiece) {
	// console.log("Passage fonction ajouterPiece");

	let nouvelleDiv = document.createElement("div");

	let numPieceSuivante = numPiece + 1;

	document
		.getElementById("pieces")
		.appendChild(nouvelleDiv)
		.setAttribute("id", "piece" + numPieceSuivante);

	const nouvellePiece = document.getElementById("piece" + numPieceSuivante);
	nouvellePiece.innerHTML =
	`piece ` + numPieceSuivante +`
	Prix
	<input type="number" name="prix` + numPieceSuivante + `" id="prix` + numPieceSuivante + `" />
	Quantité
	<input type="number" name="quantite` + numPieceSuivante + `" id="quantite` + numPieceSuivante + `" />`

	document.getElementById('ajouterPiece').innerHTML = '<input type="button" name="buttonAjouterPiece" id="buttonAjouterPiece" value="Rajouter une pièce" onClick="ajouterPiece(' + numPieceSuivante + ')" />';
}