title: id values turns always same from foreach in mvc view page
body: <p>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.</p>
  <p>I tried a few jquery code but they didn't work correctly. I need the correct id values when I click other accordions.</p>
  <p>I would be glad for any kind of help. Thanks a lot.</p>
  <p>Here is my code:</p>
  <pre><code>@model IEnumerable&lt;match&gt;
  
  @{
      ViewData[&quot;Title&quot;] = &quot;Home Page&quot;;
  
  }
  &lt;head&gt;
      &lt;script src=&quot;~/lib/jquery/dist/jquery.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;~/lib/jquery/dist/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;~/lib/jquery-validation/dist/jquery.validate.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;~/lib/jquery-validation/dist/jquery.validate.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js&quot;&gt;&lt;/script&gt;
   
      &lt;style&gt;
          .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;
          }
      &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;h4&gt;Title List:&lt;/h4&gt;
      &lt;table class=&quot;table table-hover&quot;&gt;
          @foreach (var item in Model)
          {
              &lt;tr class=&quot;yzt&quot;&gt;
                  &lt;td class=&quot;xyz&quot; id=&quot;item_title&quot; &gt;
                     
                      &lt;button class=&quot;accordion&quot; id=&quot;title&quot; &gt;@Html.DisplayFor(modelItem =&gt; item.title)&lt;/button&gt;
                      &lt;div class=&quot;panel&quot;&gt;
                          &lt;p id=&quot;modelId&quot; hidden&gt;@Html.DisplayFor(modelItem=&gt;item.Id)&lt;/p&gt;
                          &lt;p&gt;@Html.DisplayFor(modelItem =&gt; item.context)&lt;/p&gt;
  
                          @await Html.PartialAsync(&quot;Create&quot;, item.Exams@*, Exams*@)
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          }
      &lt;/table&gt;
      &lt;script&gt;
          var acc = document.getElementsByClassName(&quot;accordion&quot;);
          var i;
          for (i = 0; i &lt; acc.length; i++) {
              acc[i].addEventListener(&quot;click&quot;, function () {
                  this.classList.toggle(&quot;active&quot;);
                  var panel = this.nextElementSibling;
                  if (panel.style.display === &quot;block&quot;) {
                      panel.style.display = &quot;none&quot;;
                  } else {
                      panel.style.display = &quot;block&quot;;
                  }
              });
          }
          
          //document.querySelectorAll('.accordion').forEach(link =&gt; this.addEventListener('click', myFunction))
  
          //function myFunction() {
          //    document.getElementById(&quot;matchId&quot;).value = document.getElementById(&quot;modelId&quot;).innerHTML;
          //    console.log(&quot;value is&quot; + document.getElementById(&quot;matchId&quot;).value);
  
          //}
  
          document.querySelectorAll('.panel').forEach(link =&gt; this.addEventListener('click', myFunction))
  
          function myFunction() {
              document.getElementById(&quot;matchId&quot;).value = document.getElementById(&quot;modelId&quot;).innerHTML;
              console.log(&quot;value is&quot; + document.getElementById(&quot;matchId&quot;).value);
  
          }
  
          //document.querySelectorAll(&quot;.accordion&quot;)
          //document.getElementById(&quot;match_title&quot;).value = document.getElementById(&quot;title&quot;).innerHTML;
  
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>