I can't get past the js div hiding problem

Question

I want to hide the divi when I click the button and open it when I click it again. But I couldn't run the normally working code, what could be the reason?

The js code works when there is only one div, but it does not work due to this code I wrote, but I can't solve the problem.

Razor Page

  @for (int i = 0; i < Model.quest.Count; i++)
                    { 
        <div class="row mt-12" >
                <div class="col-md-1">
                    <input type="checkbox" id="questcb" asp-for="@Model.quest[i].check">
                    <span>@(i + 1) Soru</span>
                </div>

   

                 <div class="col-md-9">
                        <textarea class="form-control" [email protected][i].Question rows="3" id="question" hidden></textarea>
                        <label>@Model.quest[i].Question</label>
                    </div>
                </div>
                <div class="row mt-12">
                    <div class="col-md-1" hidden>
                        <button class="btn btn-outline-secondary" type="button" id="A" onclick="clickFunc(this.id)">A</button>
                    </div>
                    <div class="col-md-1" >
                        A)
                    </div>
                    <div class="col-md-11"  hidden="hidden">
                        <input type="text" [email protected][i].Answer1 class="form-control" placeholder="" id="answer"
                       aria-label="Example text with button addon" aria-describedby="button-addon1">
                    </div>
                    <div class="col-md-11" id="Amod_@i" style="display:inline-block">
                        @Model.quest[i].Answer1
                    </div>
                    <div class="col-md-2">
                        <button class="btn btn-primary" type="button" id="mod_@i" onclick="question(this.id)">Cevapları Görüntüle</button>
                    </div>
                </div>
}

js code

 let question = button => {
                    let element = document.getElementById(`A${button}`);
                    let buttonDOM = document.getElementById(`${button}`)
                    let hidden = element.getAttribute("hidden");
            
                    if (hidden) {
                        element.removeAttribute("hidden");
                        buttonDOM.innerText = "Cevapları Gizle";
                    } 
                    else {
                        element.setAttribute("hidden", "hidden");
                        buttonDOM.innerText = "Cevapları Görüntüle";
                    }
                }
            </script>

Answer 1

If the id of div is unique in your code,your js should work.If it still doesn't work,you can try to find the div with the position of the button:

 let question = button => {
            let element = $("#" + button).parent().siblings(".col-md-11")[1];
            let buttonDOM = document.getElementById(`${button}`);
            if (element.hidden) {
                element.removeAttribute("hidden");
                buttonDOM.innerText = "Cevapları Gizle";
            }
            else {
                element.setAttribute("hidden", "hidden");
                buttonDOM.innerText = "Cevapları Görüntüle";
            }
        }

result: