Jquery : Trouble passing value through on("click")

Question

So,there are two sections a and b (for this example). I want each of those sections to be clickable and that such action change the value of the "display" paragraph.

 <ul>
   <li id="a">A</li>
   <li id="b">B</li>    
 </ul>

 <p id="display"> </p>

So, I wrote those lines in Jquery :

 var sectionsIdList = ["a", "b"];

 for (i = 0; i < sectionsIdList.length; i++) { 
   $("#"+sectionsIdList[i]).on("click", function() {
       $("#display").text("section : " + sectionsIdList[i]);
 });
 }

It is important for me to perform those actions within a loop. Here for the example, there are only 2 sections, but I'm looking for an extension to N sections possible.

The trouble seems that Jquery is passing the sectionsIdList[i] by reference and not by value. But that's just a guess, and all the things I tried didn't solve the problem.

Do you have any idea ?

Here is the code mentionned above :

https://jsfiddle.net/Lk63auhg/

Thanks for your help !