id values turns always same from foreach in mvc view page

I am using mvc .net core for a project and I have a view page. I need some id values from this page for using them inside partial view. Because I am using those id values for foreign key in another table to post. From main page these values posts in database correctly. I always post 5 values and always 5 id there in database I saw when I checked. But when I click the accordion this id always turns first id from these 5 values. if I posted as 6,7,8,9,10 it just turns me 6 and it doesn’t matter if I clicked the last one in the page or first one. But context and title always correct when I check it from database and from page.

I tried a few jquery code but they didn’t work correctly. I need the correct id values when I click other accordions.

I would be glad for any kind of help. Thanks a lot.

Here is my code:

@model IEnumerable<match>

@{
    ViewData["Title"] = "Home Page";

}
<head>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
 
    <style>
        .accordion {
            background-color: #eee;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
        }

            .active, .accordion:hover {
                background-color: #ccc;
            }

        .panel {
            padding: 0 18px;
            display: none;
            background-color: white;
            overflow: hidden;
        }
    </style>

</head>
<body>

    <h4>Title List:</h4>
    <table class="table table-hover">
        @foreach (var item in Model)
        {
            <tr class="yzt">
                <td class="xyz" id="item_title" >
                   
                    <button class="accordion" id="title" >@Html.DisplayFor(modelItem => item.title)</button>
                    <div class="panel">
                        <p id="modelId" hidden>@Html.DisplayFor(modelItem=>item.Id)</p>
                        <p>@Html.DisplayFor(modelItem => item.context)</p>

                        @await Html.PartialAsync("Create", item.Exams@*, Exams*@)
                    </div>
                </td>
            </tr>
        }
    </table>
    <script>
        var acc = document.getElementsByClassName("accordion");
        var i;
        for (i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function () {
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.display === "block") {
                    panel.style.display = "none";
                } else {
                    panel.style.display = "block";
                }
            });
        }
        
        //document.querySelectorAll('.accordion').forEach(link => this.addEventListener('click', myFunction))

        //function myFunction() {
        //    document.getElementById("matchId").value = document.getElementById("modelId").innerHTML;
        //    console.log("value is" + document.getElementById("matchId").value);

        //}

        document.querySelectorAll('.panel').forEach(link => this.addEventListener('click', myFunction))

        function myFunction() {
            document.getElementById("matchId").value = document.getElementById("modelId").innerHTML;
            console.log("value is" + document.getElementById("matchId").value);

        }

        //document.querySelectorAll(".accordion")
        //document.getElementById("match_title").value = document.getElementById("title").innerHTML;

    </script>
</body>

Answer

I recommend you to write like this:

<div class="panel" id=@item.Id onclick="test(@item.Id)">

function test(val){
    alert(val);
}

Your code will create multiple having id “title” and multiple

having id “modelId”, and this is also the reason why you always get the id from the first item, what you write document.getElementById("modelId").innerHTML will always get the first dom element which id = “modelId”

Advertisement

Answer