Soy nuevo en diseño web. Tengo varias líneas generadas de elementos de la base de datos MySQL en los que quiero realizar cambios, pero cuando hago clic en el botón para mostrar, solo muestra el primer botón incluso si hago clic en el segundo o tercer "Agregar".

<body> {% for trail in trails %} <div> <form> {% csrf_token %} TrailName:{{trail.1}} AreaName:{{trail.2}} City:{{trail.3}} Length:{{trail.8}} RouteType:{{trail.11}} AvgRating{{trail.12}} </form> <button onClick="show()">Add</button> </div> <div class="part"> <form action="insert_schedule" method="POST"> {% csrf_token %} <input type="radio" name="trailid" value="{{trail.0}}"> schedule date: <input type="date" name="schedule_date"> <input type="submit" value="Ok"> </form> <button onClick="hide()">Cancel</button> </div> {% endfor %} </body> function show() { var show_part = document.querySelector(".part"); show_part.style.display = "block"; } function hide() { var show_part = document.querySelector(".part"); show_part.style.display = "none"; }Dada la estructura HTML que muestra:
function show(el){ const show_part = el.parentElement.nextElementSibling; show_part.hidden = false; } function hide(el){ const show_part = el.parentElement; show_part.hidden = true; } y cambie el código de su button a
<button type="button" onclick="show(this)">Cancel</button> . . . <button type="button" onclick="hide(this)">Cancel</button>