jQuery .each() index?

function run_each() {  var $results = $(".results");  $results.empty();  $results.append("==================== START 1st each ====================");  console.log("==================== START 1st each ====================");  $('#my_select option').each(function(index, value) {    $results.append("<br>");    // log the index    $results.append("index: " + index);    $results.append("<br>");    console.log("index: " + index);    // logs the element    // $results.append(value);  this would actually remove the element    $results.append("<br>");    console.log(value);    // logs element property    $results.append(value.innerHTML);    $results.append("<br>");    console.log(value.innerHTML);    // logs element property    $results.append(this.text);    $results.append("<br>");    console.log(this.text);    // jquery    $results.append($(this).text());    $results.append("<br>");    console.log($(this).text());    // BEGIN just to see what would happen if nesting an .each within an .each    $('p').each(function(index) {      $results.append("==================== nested each");      $results.append("<br>");      $results.append("nested each index: " + index);      $results.append("<br>");      console.log(index);    });    // END just to see what would happen if nesting an .each within an .each  });  $results.append("<br>");  $results.append("==================== START 2nd each ====================");  console.log("");  console.log("==================== START 2nd each ====================");  $('ul li').each(function(index, value) {    $results.append("<br>");    // log the index    $results.append("index: " + index);    $results.append("<br>");    console.log(index);    // logs the element    // $results.append(value); this would actually remove the element    $results.append("<br>");    console.log(value);    // logs element property    $results.append(value.innerHTML);    $results.append("<br>");    console.log(value.innerHTML);    // logs element property    $results.append(this.innerHTML);    $results.append("<br>");    console.log(this.innerHTML);    // jquery    $results.append($(this).text());    $results.append("<br>");    console.log($(this).text());  });}$(document).on("click", ".clicker", function() {  run_each();});

.results {  background: #000;  height: 150px;  overflow: auto;  color: lime;  font-family: arial;  padding: 20px;}.container {  display: flex;}.one,.two,.three {  width: 33.3%;}.one {  background: yellow;  text-align: center;}.two {  background: pink;}.three {  background: darkgray;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="container">  <div class="one">    <select id="my_select">      <option>apple</option>      <option>orange</option>      <option>pear</option>    </select>  </div>  <div class="two">    <ul id="my_list">      <li>canada</li>      <li>america</li>      <li>france</li>    </ul>  </div>  <div class="three">    <p>do</p>    <p>re</p>    <p>me</p>  </div></div><button class="clicker">run_each()</button><div class="results"></div>