简单的JavaScript手风琴-如何获取被点击面板的索引？

Question

I created a simple accordion with plain JavaScript, no jQuery. It dynamically is created by the number of data given in an external JavaScript file in JSON format.

The accordion looks like that in the html code:

<div id="description"> 
<script language="javascript" type="text/javascript">
startAccordion();
function startAccordion() 
{
    for (var i=1; i<=Object.keys(description).length; i++){
        document.getElementById("description").innerHTML += 
            "<button class='accordion'>Trail " + description[i].Title + "</button>" + "<div class='accordion-panel'>" + "<p>" + description[i].Description + "<br></p>" + "</div>";
    }
}
</script>

Within the JavaScript the behavior when a panel on the accordion is clicked, is handled.

var acc = document.getElementsByClassName('accordion');
var panel = document.getElementsByClassName('accordion-panel');

for (var i = 0; i < acc.length; i++) 
{
  acc[i].onclick = function()
  {         
    // Toggle between adding and removing the "active" class,
    //to highlight the button that controls the panel 
    this.classList.toggle("active");

    //Toggle between hiding and showing the active panel
    var panel = this.nextElementSibling;

    if (panel.style.display === "block") {
        panel.style.display = "none";
    } else {
        panel.style.display = "block";
    }
  }
}

Question: When the user clicks on a panel and this certain one is opened/activated, is there any possibility to get the index or any unique information about which of the panels has been clicked?

I really need this information, because based on that, the related marker on a map should be shown. I tried for hours and hours, but I could not find out, how to get the panel index. The variable "i" is unfortunately always 20, as 20 features are included. I think this is strange, because with acc[i] the related panel is opened/activated correctly.

I would like to avoid using jQuery, but if you know that with my solution it is impossible I maybe could use jQuery, although I would have to create the whole accordion again.

Answer 1

Following the link provided by Mohamed Abbas, this is the way it worked out. It is a scope issue, where within the for loop a new scope is created:

var acc = document.getElementsByClassName('accordion');
for (var i = 0, i < acc.length; i++)
{

(function(index){
    acc[i].onclick = function(){

    //same as within the function given in the original post

          alert(index)  ;
    }    
})(i);

}