visibility mit Javascript ändern

Hallo Zusammen, ich möchte von der Zeile
<tr style="visibility: collapse" id="opt">
per js die visibility ändern. Versucht habe ich es mit
function add() {
document.getElementById("opt").style.visibility = "visible";
}
die per Button aufgerufen wird. Das lässt die Zeile aber nur kurz aufblitzen und direkt wieder verschwinden. Was mache ich falsch?

Der hier verwendete Code

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <table> <tr> <td>Vorname <input type="text" id="vn1"></td> <td>Nachname: <input type="text" id="nn1"></td> </tr> <tr style="visibility: collapse" id="opt"> <td>Vorname: <input type="text" id="vn2"></td> <td>Gewicht: <input type="text" id="nn2"></td> </tr> <tr> <td colspan="2"><button onclick="add()">Weitere Reihe hinzufügen</button></td> </tr> </table> <script> function add() { document.getElementById("opt").style.visibility = "visible"; } </script> </body> </html>