Help to understand loop and arguments

Hello there,

Simple question here. Can you help me to understand the mechanism that lies behind this loop?

$("a").each(function(index, anchor){
const $href = $(anchor).attr("href");
$(anchor).parent().append($href);
});

The HTML is the following:

  <ul id="restaurantList">
    <li><a href="http://www.datdog.com/">Dat Dog</a></li>
    <li><a href="https://portofcallnola.com/">Port of Call</a></li>
    <li><a href="https://www.arnaudsrestaurant.com/">Arnaud's</a></li>
    <li><a href="http://www.frenchquarter.com/nola/port-st-peter/4214/">Port St. Peter</a></li>
    <li><a href="http://www.mothersrestaurant.net/">Mother's</a></li>
  </ul>

I understand the end result, but when I use this variation below, I write 4 times the links next to each LI item, rather than one time only:

$("a").each(function(index, anchor){
const $href = $("a").attr("href");
$("a").parent().append($href);

});

Using the argument "anchor" makes it right. However, ("a") is the anchor, so I don't understand why when I change the syntax, the links("href") get written 4 times (1 time per looped item) instead of just once.

I also don't understand the "Index" argument. I thought it would be a "key" word, a specific command, but I changed it for any possible random word and I get the same result.

For instance, If I "conslole.log" the following, I get an organized list of elements in the console. If I change "index" to "Icecream" or "iLovePizza" I get the same organized list. Why?

$("a").each(function(index, anchor){
console.log(index, $(anchor).attr("href"));
});

Thanks!