Нуждаюсь в помощи, сам не знаю js и обычно копирую существующий код. У меня есть таблица, которая заполняется из БД, в конце каждой строки есть кнопка для редактирования записи. При нажатии открывается диалоговое окно с уже заполненными данными, проблема только состоит в том, что диалоговое окно открывается только на первой строке. Я знаю что проблема состоит в том, что диалоговое окно открывается по ID кнопки, и из-за того что записи дублируются ID остается тот же, но как говорил ранее js не знаю. Помогите исправить, кому не сложно, буду благодарен.
Код:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - HTML 5.2 new dialog tag</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:200,400,700'><link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<!-- Simple boîte de dialogue, contenant un formulaire -->
<dialog id="favDialog">
<form method="dialog">
<section>
<input type="text" name="fname" id="fname"><br><br>
<input type="text" name="lname" id="lname"><br><br>
<input type="text" name="age" id="age"><br><br>
</section>
<menu>
<button id="cancel" type="reset">reset</button>
<button id="submit" type="submit">submit</button>
</menu>
</form>
</dialog>
<table id="table" border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
<th>settings</th>
</tr>
<tr>
<td>FN1</td>
<td>LN1</td>
<td>111</td>
<td><a id="updateDetails">edit(нажми на меня)</a></td>
</tr>
<tr>
<td>FN2</td>
<td>LN2</td>
<td>211</td>
<td><a id="updateDetails">edit</a></td>
</tr>
<tr>
<td>FN3</td>
<td>LN3</td>
<td>311</td>
<td><a id="updateDetails">edit</a></td>
</tr>
<tr>
<td>FN4</td>
<td>LN4</td>
<td>411</td>
<td><a id="updateDetails">edit</a></td>
</tr>
<tr>
<td>FN5</td>
<td>LN5</td>
<td>511</td>
<td><a id="updateDetails">edit</a></td>
</tr>
</table>
<!-- partial -->
<script src="./script.js"></script>
<script>
var table = document.getElementById('table');
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
//rIndex = this.rowIndex;
document.getElementById("fname").value = this.cells[0].innerHTML;
document.getElementById("lname").value = this.cells[1].innerHTML;
document.getElementById("age").value = this.cells[2].innerHTML;
};
}
</script>
</body>
</html>